hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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!

Qu'est-ce que la technologie de reconnaissance d'image Facebook sait sur vos photos

Qu'est-ce que la technologie de reconnaissance d'image Facebook sait sur vos photos

Beaucoup d'utilisateurs de Facebook sont probablement conscients du fait que le service de réseau social a une certaine forme de technologie de reconnaissance d'image sous le capot. Après tout, c'est ainsi que Facebook est capable de suggérer les bons amis avec lesquels étiqueter vos photos .En

(Conseils techniques et de conception)

Comment embaucher le bon talent technologique

Comment embaucher le bon talent technologique

Si vous êtes dans l'industrie de recrutement de talents, vous avez le travail difficile mais crucial de trouver la bonne personne pour le travail, les tâches qu'il implique, et l'organisation. Votre rôle peut devenir plus difficile si vous recherchez des candidats pour des postes techniques, mais vous n'avez pas le savoir-faire technique pour détecter les bonnes pommes des mauvaises .Voi

(Conseils techniques et de conception)