1. (When the page scrolls down, some elements will produce a small animation effect. Although the animation is relatively small, it can attract your attention.)
I just learned about the wow.js plug-in. I used to visit other websites and pull down the scroll bar to have various effects. It feels very magical. Now I can get this effect by myself.
Although the effect has come out, the class names corresponding to various special effects have not been sorted out on the Internet, so I wrote an article that is easy to understand (at least I can understand it myself) for your reference and study. (^_^)
Second, first explain how to use this plugin:
1. wow.js depends on animate.css, first refer to animate.css or animate.min.css in the head.
|
1
|
<
link
rel="stylesheet" type="text/css" href="css/animate.min.css">
|
2. Quote wow.js or wow.min.js at the bottom, and then write a line of javascript code below. (no need to quote jQuery)
|
1
2
3
4
|
<
script
type="text/javascript" src="js/wow.min.js"></
script
>
<
script
type="text/javascript">
new WOW().init();
</
script
>
|
Note that the WOW in new WOW().init(); must be capitalized, otherwise it will have no effect.
3. Write the element that needs to be animated above js below css (must be set to block or inline block! Must be set to block or inline block! Must be set to block or inline block!), and add the class name .
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>
The wow before the class name is added to every element with animation, and slideInLeft is the animation style. The following data-wow-duration (animation duration), data-wow-delay (animation delay time), data-wow-offset (how many pixels from the bottom after the position of the element is exposed) and data-wow-iteration (animation execution) times) These four attributes are optional.
4. In order to write the article, I tested the two attributes data-wow-offset and data-wow-iteration. The value in data-wow-offset="value" is the position of the element from the bottom of the display after the animation is completed, and Not from the bottom of the browser window.
3. Step into the topic, and test the animation effects of various class names in turn. (strive to be easy to understand)
| wow rollIn | From left to right, scrolling clockwise, the transparency changes from 100% to the set value |
| wow bounceIn | Appears from the original position, changes from small to large and exceeds the set value, then becomes smaller than the set value, then returns to the set value, and the transparency changes from 100% to the set value |
| wow bounceInUp | From bottom to top, after jumping up, it will go up a part and then bounce back, the transparency is the same as the set value |
| wow bounceInDown | From top to bottom, after falling down, it will go down a part and then bounce, the transparency is the same as the set value |
| wow bounceInLeft | From left to right, after moving over, it will exceed a part to the right and then flick to the left, the transparency is the same as the set value |
| wow bounceInRight | From right to left, after moving over, it will exceed a part to the left and then flick to the right, the transparency is the same as the set value |
| wow slideInUp | From bottom to top, fixed to the set position after going up, the transparency is unchanged at the set value (up is from bottom to top) (if the element is at the bottom, it will stretch the height of the box) |
| wow slideInDown | From top to bottom, fixed to the set position after going up, the transparency is the set value unchanged |
| wow slideInLeft | From left to right, fixed to the set position after going up, the transparency is the same as the set value (left is from left to right) |
| wow slideInRight | From right to left, fixed to the set position after going up, the transparency is the set value unchanged |
| wow lightSpeedIn | From right to left, the head first tilts to the right, then to the left, and finally changes to the original shape, and the transparency changes from 100% to the set value |
| wow pulse | The original position is enlarged a little bit, and then reduced to the original size, and the transparency is unchanged at the set value (the effect is better with the animation execution times attribute) |
| wow flipInX | The original position is leaned back and forward, and the transparency is changed from 100% to the set value |
| wow flipInY | The original position is rotated left and right, and the transparency is changed from 100% to the set value |
| wow bounce | Up and down shaking, the transparency is the same as the set value (with the animation execution times and animation duration attributes, it can achieve violent shaking or slow shaking) |
| wow shake | Left and right shaking, the transparency is the same as the set value (with the animation execution times and animation duration attributes, it can achieve violent shaking or slow shaking) |
| wow swing | From right to left, the head first tilts to the right, then tilts to the left, and finally changes to the original shape, and the transparency remains the same as the set value. |
| wow bounceInU | The original position remains unchanged, and it is directly never displayed to displayed (no transition effect) |
| wow wobble | The original position remains unchanged, similar to a person standing there shaking his head from side to side, and the transparency remains the same as the set value |
After testing so much, I finally got the trick. Open the referenced animate.css or animate.min.css, where @keyframes defines various animations, and replace the class name behind wow to test the effect.
****************************************************************
https://daneden.github.io/animate.css/ You can also see various demos here
****************************************************************
4. Cooperate with data-wow-duration (animation duration), data-wow-delay (animation delay time), data-wow-offset (how many pixels from the bottom after the position of the element is exposed) and data-wow-iteration (animation The number of executions) These four attributes can accomplish a lot of effects, and the main thing is to practice more.
5. Old browsers such as IE6 and IE7 do not support CSS3 animation, so it has no effect; and wow.js also uses the querySelectorAll method, and the lower version of IE will report an error. In order to achieve better compatibility, it is best to add a browser and version judgment.
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
};
</script>