Plug-in d'effets spéciaux de flou de mouvement numérique d'odomètre basé sur SVG

Télécharger le plug-in

(2)

Bref tutoriel

odoo.js est un effet de flou de mouvement numérique pour compteur kilométrique basé sur HTML5 SVG plugin. Ce plug-in est utilisé pour simuler l'effet du retournement rapide des numéros du compteur kilométrique. Il est facile à utiliser et a un effet de flou de mouvement lorsque les chiffres sont inversés, ce qui est très cool.

Utilisation

Introduisez le fichier odoo.js dans la page.

<script type="text/javascript" src="js/odoo.js"></script>

Structure HTML

Utilisez un

comme conteneur du compteur kilométrique.

<div class="js-odoo"></div>

Style CSS

Vous pouvez personnaliser la police et la couleur des chiffres et d'autres attributs.

.js-odoo {
  font-size: 60px;
  font-family: Roboto;
  fill: #fff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

Initialisation du plug-in

Vous pouvez initialiser le plug-in odoo.js via la méthode suivante.

odoo.default({ el:'.js-odoo',value:'￥68,123,000' })

Vous pouvez également modifier ses paramètres de configuration par défaut lors de l'initialisation.

odoo.default({
  el: '.js-odoo',
  value: '£42,000,000',
  lineHeight: 1.35,
  letterSpacing: 1,
  animationDelay: 100,
  letterAnimationDelay: 100
});

Si vous souhaitez annuler l'animation du compteur kilométrique, vous pouvez appeler la méthode Cancel().

const cancel = odoo.default({ el: '.js-odoo', value: '£42,000,000' });
cancel();

Ce qui précède est le contenu du plug-in d'effets spéciaux de flou de mouvement numérique de l'odomètre basé sur SVG. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn