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
<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)!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
