scrollReveal.js 使用方法
scrollReveal.js 是一个触发动画的插件,放在网页中是很有效果感的!
html页面引入文件scrollReveal.js
在需要加载动画效果的div 或者其他标签 中添加 data-scroll-reveal属性(如下)
<li data-scroll-reveal="enter bottom over 1s">www.sunfahui.com</li>
然后:
<script>window.scrollReveal = new scrollReveal({reset: true});</script>
效果图:
data-scroll-reveal属性
上面说了可以自定义 data-scroll-reveal 属性,下面来看看该属性的关键词和值(可选)。
enter
说明: 动画起始方向
值: top | right | bottom | left
move
说明: 动画执行距离
值: 数字,以 px 为单位
over
说明: 动画持续时间
值: 数字,以秒为单位
after/wait
说明: 动画延迟时间
值: 数字,以秒为单位