SVG-basiertes Kilometerzähler-Plug-in für digitale Bewegungsunschärfe-Spezialeffekte

Plug-in herunterladen

(2)

Kurzes Tutorial

odoo.js ist ein digitaler Bewegungsunschärfeeffekt für Kilometerzähler, der auf HTML5 SVG basiert Plugin. Dieses Plug-in wird verwendet, um den Effekt des schnellen Umdrehens der Kilometerzählerzahlen zu simulieren. Es ist einfach zu bedienen und hat einen Bewegungsunschärfeeffekt, wenn die Zahlen umgedreht werden, was sehr cool ist.

Verwendung

Fügen Sie die Datei odoo.js in die Seite ein.

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

HTML-Struktur

Verwenden Sie ein dc6dce4a544fdca2df29d5ac0ea9906b als Container des Kilometerzählers.

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

CSS-Stil

Sie können die Schriftart und Farbe der Zahlen und anderer Attribute anpassen.

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

Initialisierung des Plug-Ins

Sie können das odoo.js-Plug-In mit der folgenden Methode initialisieren.

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

Sie können die Standardkonfigurationsparameter auch während der Initialisierung ändern.

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

Wenn Sie die Kilometerzähler-Animation abbrechen möchten, können Sie die Methode cancel() aufrufen.

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

Das Obige ist der Inhalt des auf SVG basierenden Odometer-Plugins für digitale Bewegungsunschärfe. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).