⿊客内参⼩讲堂三步实现滚动条触动css动画效果
现在很多⽹站都有这种效果，我就整理了⼀下，分享出来。利⽤滚动条来实现动画效果，
ScrollReveal.js ⽤于创建和管理元素进⼊可视区域时的动画效果，帮助你的⽹站增加吸引⼒。只需要给元素增加 data-scroll-reveal 属性，当元素进⼊可视区域的时候会⾃动被触发设置好的动画。这⾥有⼀个我做的⽰例⽹站。
1、引⼊⽂件
<script src="js/scrollReveal.js"></script>
2、html页⾯
必须给元素加上 data-scroll-reveal 属性，加上之后会执⾏默认的动画效果，你也可以⾃定义改属性以显⽰不同的动画效果，如：
<div data-scroll-reveal="enter left and move 50px over 1.33s">⿊客内参的博客园</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>
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
说明: 动画起始⽅向
v
值: top | right | bottom | left
move
说明: 动画执⾏距离
值: 数字，以 px 为单位
over
说明: 动画持续时间
值: 数字，以秒为单位
after/wait
说明: 动画延迟时间<
值: 数字，以秒为单位
填充（可选）css设置表格滚动条
可以在 data-scroll-reveal 属性⾥填充（添加）⼀些类似编程的“语句”，使其更有可读性，scrollReveal.js ⽀持以下“语句”：
from
the
and then but with

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。