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 dc6dce4a544fdca2df29d5ac0ea9906b 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)!