首页 > 技术 > 正文

scrollReveal.js 使用方法
2019-08-12 12:22:36   来源:灰灰   评论:0 点击:

scrollReveal js 是一个触发动画的插件,放在网页中是很有效果感的!html页面引入文件scrollReveal js在需要加载动画效果的div 或者其他
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
说明: 动画延迟时间
值: 数字,以秒为单位
 

 

相关热词搜索:scrollReveal

上一篇:Unknown MySQL server host 'localhost' (11004) 数据库错误解决
下一篇:最后一页

分享到: 收藏
下面的评论可以用QQ或者微信微博等账号快速登录喔!灰灰等待您的评论......
看了下还是不好看,那再加一个......
看了下还是不好看,以后在这价格留言功能什么的可能会好些......