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!

8 types de Selfies vous devriez arrêter de prendre

Ah selfies, nous semblons avoir une relation d'amour avec eux . Un moment, ils sont déclarés être un signe de désordre mental et le prochain ils sont considérés comme une expression de l'amour de soi. Peu importe le camp dans lequel vous êtes, les selfies sont là pour rester à long terme.Maintena

(Conseils techniques et de conception)

20 meilleurs jeux de réalité augmentée pour les smartphones (de 2017)

L' industrie du jeu est en croissance dans différents domaines. Sur l'un il y avait des applications pour jouer à des jeux rétro, tandis que d'un autre côté, il y a la réalité augmentée qui donne vie aux jeux. Le meilleur de tous, vous pouvez maintenant jouer à des jeux de réalité augmentée sur votre smartphone sans avoir besoin d'équipement supplémentaire.Vous devez vi

(Conseils techniques et de conception)