使用animate,css和wow.js 很好用,很轻量。
强大的animate.css 和 wow.js
外链引入:
Css:
网上直接搜animate.css
Js:
wow.js同时配合 jquery.js使用
第一点:
直接使用类,想要什么效果直接去https://daneden.github.io/animate.css/
这个网站,选择想要的效果,直接写到class中,但注意,所有的效果,都要
加 wow
第二点:
在js中,使用前先new一下.
高级用法:
第一点:
< section class = “ wow slideInLeft ” data-wow-duration = “ 2s ” data-wow-delay = “ 5s ” > </ section >
< section class = “ wow slideInRight ” data-wow-offset = “ 10 ” data-wow-iteration = “ 10 ” >
</ section >
data-wow-duration:表示动画持续的时间。
data-wow-delay:表示动画延迟时间
data-wow-offset:表示偏移
data-wow-iteration:迭代
第二点:
自定义配置:
主要后面三点,其中offset很重要意思为:触发动画时到元素的距离