1. (When the page scrolls down, some elements will produce small animation effects. Although the animation is relatively small, it can attract you Attention.)
I just learned about the wow.js plug-in. I used to see various effects when I visited other websites and pulled down the scroll bar. 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 easy-to-understand (at least I can understand it) article for everyone's reference and study. (^_^)
2. First explain how to use this plug-in:
1. wow.js depends on animate.css, first reference animate.css or animate.min in the head .css.
<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 another line of javascript code below. (No need to quote jQuery)
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
new WOW().init();
</script> Note that WOW in new WOW().init(); must be capitalized, otherwise it will have no effect.
2. Quote wow.js or wow.min.js at the bottom, and then write another line of javascript code below. (No need to quote jQuery)
3. Write the elements that need animation below the css and above the js (must be set to block or inline block! Must be set to block or inline block! Must be set to block or inline block Inline block! ) and add the class name.
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></p>
The wow in front of the class name is added to every animated element, and slideInLeft describes the animation style. The following
data-wow-duration (animation duration),
data-wow-delay (animation delay time),
data-wow-offset (element’s How many pixels away from the bottom after the position is exposed)
data-wow-iteration (number of animation execution times)
These four attributes are optional.
4. In order to write an article, I specifically tested the two attributes data-wow-offset and data-wow-iteration. The value in data-wow-offset="value" is completed by animation. The position of the back element from the bottom of the monitor, not the bottom of the browser window.
3. Getting to the point, let’s test the animation effects of various class names in turn. (Strive to make it easy to understand)
| wow rollIn | Scroll from left to right, clockwise, transparency changes from 100% to the set value |
| | |
| wow bounceIn | Appears from the original position, changes from small to large beyond the set value, and then becomes smaller than Set value, then return to the set value, the transparency changes from 100% to the set value |
| wow bounceInUp | From bottom to top, it will exceed upward after jumping up A part then bounces back, the transparency remains unchanged at the set value |
| wow bounceInDown | From top to bottom, after falling, it will go down a part and then bounce a bit, transparency The set value remains unchanged |
| wow bounceInLeft | From left to right, after moving over, it will extend a part to the right and then bounce to the left. The transparency is the set value. Unchanged |
| wow bounceInRight | From right to left, after moving over, it will extend a part to the left and then bounce to the right, the transparency will remain unchanged at the set value |
| wow slideInUp | From bottom to top, come up and fix To the set position, the transparency remains at the set value (up means from bottom to top) (if the element is at the bottom, it will expand the height of the box) |
| wow slideInDown | From top to bottom, after coming up, it will be fixed to the set position, and the transparency will remain unchanged at the set value |
| wow slideInLeft | From left to right, after coming up Fixed to the set position, the transparency remains at the set value (left is from left to right) |
| wow slideInRight | From right to left, fixed after coming up To the set position, the transparency remains unchanged at the set value |
| wow lightSpeedIn | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值 |
| wow pulse | 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳） |
| wow flipInX | 原位置后仰前栽、透明度从100%变化至设定值 |
| wow flipInY | 原位置左右旋动、透明度从100%变化至设定值 |
| wow bounce | 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow shake | 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow swing | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变 |
| wow bounceInU | 原位置不变、直接从不显示到显示（无过过渡效果） |
| wow wobble | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
测试了这么多终于摸到窍门了，打开引用的animate.css或者animate.min.css，里面@keyframes定义了各种动画，将wow后面的类名替换一下测试效果就可以了。
****************************************************************
https://daneden.github.io/animate.css/ 也可以在这个地方看各种演示
****************************************************************四、配合data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可以完成很多效果，主要还是多实践。
五、IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。
The above is the detailed content of Detailed explanation of class names corresponding to various special effects in wow.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
