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!

Facebook diffusera bientôt ses annonces «mid-roll» et partagera ses revenus avec les éditeurs

Facebook diffusera bientôt ses annonces «mid-roll» et partagera ses revenus avec les éditeurs

Le service vidéo de Facebook est prêt à passer à l'étape suivante puisque des sources de l'industrie auraient déclaré à Recode que le service de médias sociaux allait commencer à tester un nouveau format d'annonce "mid-roll" pour les vidéos postées sur Facebook .Du point de vue de l'exécution, le format d'annonce «mid-roll» de Facebook permettrait aux éditeurs de vidéos d'insérer des publicités dans leurs clips vidéo d'au moins 90 secondes . En plus de cela, l

(Conseils techniques et de conception)

Comment être un écrivain - Conseils et ressources

Comment être un écrivain - Conseils et ressources

Auparavant, je faisais partie d'un groupe d'écrivains indépendants qui étaient convaincus qu'ils étaient spéciaux. Dans le groupe, il y a des écrivains de contenu comme moi qui vivent de l'écriture, et aussi des gens qui ont toujours voulu écrire mais n'ont jamais vraiment eu la chance d'apprendre. Un de

(Conseils techniques et de conception)