When using write css3 effects, you will encounter more trouble is css3 code requires a lot of debugging, but now have wow.js, make it easy to write a lot of special effects.
wow.js official website
https://www.delac.io/wow/index.html
Tutorial:
Step: wow.js dependent on animate.css , or necessary to introduce the animate.css animate.min.css within head.
<link rel="stylesheet" href="css/animate.css">
Step two: the introduction of wow.js or wow.min.js, then write a line of code inside the js file.
<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
Third step: Then the corresponding block element, add the appropriate class name of the class, the animation can be achieved.
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>
wow: is a must to be added;
slideInLeft: shows the animation style, sliding from the left side;
the Data-WOW-DURATION: animation duration;
the Data-WOW-Delay: animation delay time;
the Data-WOW-offset: element after performing position is exposed from the bottom of the number of pixels;
Data-WOW-Iteration: animation execution frequency;
=== four optional attribute is optional.
| wow rollIn | From left to right, scrolling clockwise transparency from 100% to change the set value |
| wow bounceIn | Appears from the home position, from small to large exceeds the set value, then a small change in the set value, and then return to the set value, the transparency from 100% to change the set value |
| wow bounceInUp | From the bottom up, pounced later portion will then spring back upwards beyond transparency unchanged setpoint |
| wow bounceInDown | From the top down, falling down part of the future will be beyond then bounce it, the same as the set value transparency |
| wow bounceInLeft | From left to right, the future will move over to the right beyond the elastic part and then left it, set transparency values unchanged |
| wow bounceInRight | From right to left, the future will move over to the left and then right beyond the part about the bomb, transparency unchanged set value |
| wow slideInUp | From the bottom up, after up to the set position is fixed, the set value of the transparency change (up from the bottom up) (if the elements in the bottom, will distraction height of the box) |
| wow slideInDown | From the top down to the set position is fixed onto the transparency change the set value |
| wow slideInLeft | From left to right, back up to the set position is fixed, the set value is unchanged transparency (left is left to right) |
| wow slideInRight | From right to left, back up to the set position is fixed, the set value of the constant opacity |
| wow lightSpeedIn | From right to left, the first head tilted to the right, and tilted to the left, and finally to the original shape, the transparency from 100% to change the set value |
| wow pulse | In the home position a little enlarged to reduce the size of the original transparency value is set constant (complex animation execution count better effect properties) |
| wow flipInX | Original reclined position before planting, transparency from 100% to change the set value |
| wow flipInY | Rotating around the home position, the transparency from 100% to change the set value |
| wow bounce | Shake up and down, to set the transparency value unchanged (with animation execution times and duration of the animation properties can be achieved also shake violently or slowly shaking) |
| wow shake | About jitter, transparency setted value (with animation execution times and duration of the animation properties can be achieved also shake violently or slowly shaking) |
| wow swing | From right to left, the first head tilted to the right, and tilted to the left, and finally to its original shape, transparency unchanged set value |
| wow bounceInU | Original position unchanged, never directly displayed on the display (no over transition effects) |
| wow wobble | Original position unchanged, similar to a person standing around that head shaking, transparency unchanged set value |