使用animate,css和wow.js 很好用,很轻量。css
强大的animate.css 和 wow.jsjquery
外链引入:git
Css:github
网上直接搜animate.csside
Js:动画
wow.js同时配合 jquery.js使用网站
第一点:spa
直接使用类,想要什么效果直接去https://daneden.github.io/animate.css/3d
这个网站,选择想要的效果,直接写到class中,但注意,全部的效果,都要blog
加 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很重要意思为:触发动画时到元素的距离