Wow.js?animate.css--interesting Page scrolling animation, wow.jsanimate.css
Today, I accidentally found a particularly simple page animation effect, which is quite good. I played for a morning and now I will introduce this rolling Animation:
I. Usage:
1.download animate.css
2. Download wow. js
3. reference the file like this:
<link href="css/animate.min.css" rel="stylesheet" /><script type="text/javascript" src="js/wow.min.js"></script>
4. initialize wow. js
<Script> new WOW (). init (); // WOW must be capitalized. </script>
Or
<Script> wow = new WOW ({boxClass: 'wow', // The default box class name is animateClass: 'animated', // default is the library offset of the animation triggered by animate.css: 0, // default offset mobile: true, // whether the default supports mobile live: true // default check for new elements}) wow. init (); </script>
Attribute explanation:
Attribute/Method |
Type |
Default Value |
Description |
BoxClass |
String |
'Wow' |
Class of the element to be animated |
AnimateClass |
String |
'Animate' |
Animation class |
Offset |
Integer |
0 |
Animation execution starts from the visible area |
Mobile |
Boolean Value |
True |
Whether to perform animation on a mobile device |
Live |
Boolean Value |
True |
Whether the content asynchronously loaded is valid |
5. Add the wow style to the animation and an animation name such as animate.css:
<div class="wow slideInLeft"></div>
This simple animation is complete!
2. animation name and effect
Click here to read it.
Iii. related attributes:
Wow. js data-wow-duration (animation duration)
Data-wow-delay (animation delay Time)
Data-wow-offset (distance starting animation (bottom of browser ))
Data-wow-interation (number of animation repetitions)
Shape:
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div><div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>