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!

20 conceptions filaires pour un style de vie minimaliste

Si vous n'êtes pas sûr de ce que sont les produits filaires, imaginez une boîte ordinaire avec un design spécial: vous obtenez seulement les cadres, pas de côtés, de dessus ou de dessous. Les produits filaires les plus courants que vous connaissez sont probablement des séchoirs à vaisselle, des porte-vêtements ou des abat-jours, mais de nos jours, il y a plus de produits qui adoptent l'approche minimaliste de la conception.Les conc

(Conseils techniques et de conception)

Réagir MDL Fusionne Réagir avec Material Design Lite

Google a récemment mis en ligne une bibliothèque appelée Material Design Lite, une ressource frontend pour les développeurs. Il stylise automatiquement tout site Web en utilisant les directives de conception de matériel avec CSS et JS pré-construits.Ceci est un cadre populaire pour les projets de développement simples. React

(Conseils techniques et de conception)