Transition de nombre plus lisse avec l'odomètre

L'un des moyens efficaces de rendre plus intéressante une présentation d'informations numériques consiste à ajouter une animation de transition . Créer une animation de transition peut être fait avec javascript, mais le codage vous prendra beaucoup de temps. Pour une alternative plus rapide, essayez Odometer.

Odometer est un plugin javascript qui peut vous aider à rendre vos informations numériques plus attrayantes avec des transitions en douceur et des thèmes sympas. Il est facile à configurer et est pris en charge sur de nombreux navigateurs actuels.

la mise en oeuvre

Odometer est un plugin javascript autonome . Vous n'avez qu'à inclure le fichier js et son thème dans votre page avec le code suivant:

Vous avez terminé! Maintenant, tout élément que vous enveloppez avec la classe odometer sera transformé en un odomètre.

Dans cet exemple, j'utilise un thème d'odomètre semblable à une voiture. Odometer est livré avec six autres thèmes différents, à savoir le thème par défaut, numérique, minimal, plaza, machine à sous et les thèmes de la gare. Vous pouvez vous diriger vers la page de démonstration pour les voir en action.

Pour mettre à jour la valeur, vous pouvez utiliser le javascript natif ou un code jQuery. D'abord, appelez la fonction setTimeout, puis définissez la valeur mise à jour comme dans l'extrait suivant:

Ou vous pouvez utiliser un formulaire jQuery comme ceci:

 setTimeout (function () {$ ('. odometer'). html (5555);}, 1000); 

La valeur de 1000 dans le code signifie que le processus de mise à jour sera exécuté une seconde après le chargement complet de la page.

Ensuite, ajoutez une classe d' odometer à n'importe quel élément, par exemple:

3252

Et la valeur de 3252 sera alors changée en 5555 (comme défini précédemment) avec une transition sympa.

Options

Pour des fonctionnalités plus avancées, Odometer vous fournit quelques options à personnaliser. Ceci est utile lorsque le réglage par défaut ne vous convient pas. Pour pouvoir définir des options, créez d'abord un objet odometerOptions comme ceci:

L'option de format affecte la règle de formatage des nombres, comme l'affichage d'un point décimal avant certains chiffres. (ddd) signifie qu'il n'y a pas de point décimal dans le nombre. Et pour les autres options, consultez la liste suivante:

 window.odometerOptions = {auto: false, // N'initialise pas automatiquement tout avec la classe 'odometer' selector: '.my-numbers', // Change le sélecteur utilisé pour trouver automatiquement les objets à animer format: '(, ddd ) .dd ', // Modifier le formatage des groupes de chiffres et le nombre de chiffres après la virgule décimale: 3000, // Modifier la durée pendant laquelle le javascript attend que l'animation CSS prenne le thème:' voiture ', // Spécifier le thème (si vous avez plus d'un fichier css de thème sur la page) animation: 'count' // Count est une méthode d'animation plus simple qui incrémente la valeur, // l'utilise lorsque vous cherchez quelque chose de plus subtil. } 

Conclusion

Pour ceux qui présentent souvent des informations numériques et voudraient les rendre plus accrocheurs, Odometer est un bon choix. Prenez simplement note que si vous entrez autre chose qu'un nombre, le plugin ne fonctionnera pas . Quoi qu'il en soit, essayez-le et faites-nous savoir ce que vous en pensez!

18 choses cool que vous ne croirez pas ont été construites en utilisant CSS

Contrairement à la croyance populaire, CSS n'est pas seulement utilisé pour fournir un style de base pour une page Web afin de le rendre plus attrayant. Il y a beaucoup d'autres choses que l'on peut faire avec CSS aussi. Avec la possibilité de créer des animations et des interactions, CSS avec HTML et Javascript permettent aux développeurs web de jouer et d'expérimenter différentes méthodes.C'e

(Conseils techniques et de conception)

14 drapeaux d'opéra Tweaks pour une meilleure expérience de navigation

Similaire à d'autres navigateurs, Opera est également livré avec des fonctionnalités expérimentales qui peuvent améliorer votre expérience de navigation . Que vous cherchiez à accélérer la navigation, à améliorer la sécurité ou simplement à modifier l'interface utilisateur, vous devriez être en mesure de trouver un drapeau Opera qui pourrait vous aider.Voici une liste

(Conseils techniques et de conception)