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

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).

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn