SVG-based odometer digital motion blur special effects plug-in

Download plug-in

(2)

Brief tutorial

odoo.js is an odometer digital motion blur special effect based on HTML5 SVG plugin. This plug-in is used to simulate the effect of rapid flipping of odometer numbers. It's easy to use and has a motion blur effect when the numbers are flipped, which is very cool.

Usage method

Introduce the odoo.js file into the page.

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

HTML structure

Use a

as the container of the odometer.

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

CSS Style

You can customize the font and color of the numbers and other attributes.

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

Initialization plug-in

You can initialize the odoo.js plug-in through the following method.

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

You can also modify its default configuration parameters during initialization.

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

If you want to cancel the odometer animation, you can call the cancel() method.

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

The above is the content of the odometer digital motion blur special effects plug-in based on SVG. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn