scrollReveal.js实现滚动条触动css动画效果

现在很多网站都有这种效果,我就整理了一下,分享出来。

1.jpg

利用滚动条来实现动画效果,ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力。只需要给元素增加 data-scroll-reveal 属性,当元素进入可视区域的时候会自动被触发设置好的动画。

和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件。

虽然 scrollReveal.js 不依赖 animate.css,但它的动画也是用 CSS3 创建的,所以它不支持 IE10 以下的浏览器。

1、引入文件

<script type="text/javascript" src="js/scrollReveal.js"></script>

2、html页面

必须给元素加上 data-scroll-reveal 属性,加上之后会执行默认的动画效果,你也可以自定义改属性以显示不同的动画效果,如:

<div data-scroll-reveal="enter left and move 50px over 1.33s">YzmCMS官方博客</div><div data-scroll-reveal="enter from the bottom after 1s">ScrollReveal</div><div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">ScrollReveal</div>

3、JavaScript

<script type="text/javascript">if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
(function(){window.scrollReveal = new scrollReveal({reset: true});
})();
};</script>

data-scroll-reveal属性:

上面说了可以自定义 data-scroll-reveal 属性,下面来看看该属性的关键词和值(可选)。

enter
说明: 动画起始方向
值: top | right | bottom | left
move
说明: 动画执行距离
值: 数字,以 px 为单位
over
说明: 动画持续时间
值: 数字,以秒为单位
after/wait
说明: 动画延迟时间
值: 数字,以秒为单位
填充(可选)
可以在 data-scroll-reveal 属性里填充(添加)一些类似编程的“语句”,使其更有可读性,scrollReveal.js 支持以下“语句”:fromthe
and
then
butwith

本文内容摘抄自互联网,只做模板演示使用,无其它用途,如您觉得侵犯了您的权益, 请联系我,本站将立刻删除!

本文链接:http://blog4.themeol.com/post/15.html

发表列表

评论列表