快捷搜索:  朋友圈  as  伪静态  次数  虎牙  浏览数  响应式  anniu

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
说明: 动画延迟时间
值: 数字,以秒为单位

您可能还会对下面的文章感兴趣: