三步实现滚动条触动css动画效果

现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，4Ai胜于蓝|优秀个人博客

ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加 data-scroll-reveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。这里有一个我做的示例网站。演示4Ai胜于蓝|优秀个人博客

1、引入文件4Ai胜于蓝|优秀个人博客

 <script src="js/scrollReveal.js"></script>4Ai胜于蓝|优秀个人博客

2、html页面4Ai胜于蓝|优秀个人博客

必须给元素加上 data-scroll-reveal 属性，加上之后会执行默认的动画效果，你也可以自定义改属性以显示不同的动画效果，如：4Ai胜于蓝|优秀个人博客

<div data-scroll-reveal="enter left and move 50px over 1.33s">杨青个人博客</div>4Ai胜于蓝|优秀个人博客

<div data-scroll-reveal="enter from the bottom after 1s">ScrollReveal</div>4Ai胜于蓝|优秀个人博客

<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">ScrollReveal</div>4Ai胜于蓝|优秀个人博客

3、JavaScript4Ai胜于蓝|优秀个人博客

  <script>4Ai胜于蓝|优秀个人博客

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){4Ai胜于蓝|优秀个人博客

(function(){4Ai胜于蓝|优秀个人博客

window.scrollReveal = new scrollReveal({reset: true});4Ai胜于蓝|优秀个人博客

})();4Ai胜于蓝|优秀个人博客

};4Ai胜于蓝|优秀个人博客

</script> 4Ai胜于蓝|优秀个人博客

data-scroll-reveal属性4Ai胜于蓝|优秀个人博客

上面说了可以自定义 data-scroll-reveal 属性，下面来看看该属性的关键词和值（可选）。4Ai胜于蓝|优秀个人博客

enter4Ai胜于蓝|优秀个人博客

说明: 动画起始方向4Ai胜于蓝|优秀个人博客

v

值: top | right | bottom | left4Ai胜于蓝|优秀个人博客

move4Ai胜于蓝|优秀个人博客

说明: 动画执行距离4Ai胜于蓝|优秀个人博客

值: 数字，以 px 为单位4Ai胜于蓝|优秀个人博客

over4Ai胜于蓝|优秀个人博客

说明: 动画持续时间4Ai胜于蓝|优秀个人博客

值: 数字，以秒为单位4Ai胜于蓝|优秀个人博客

after/wait4Ai胜于蓝|优秀个人博客

说明: 动画延迟时间<4Ai胜于蓝|优秀个人博客

值: 数字，以秒为单位4Ai胜于蓝|优秀个人博客

填充（可选）4Ai胜于蓝|优秀个人博客

可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：4Ai胜于蓝|优秀个人博客

from4Ai胜于蓝|优秀个人博客

the4Ai胜于蓝|优秀个人博客

and4Ai胜于蓝|优秀个人博客

then4Ai胜于蓝|优秀个人博客

but4Ai胜于蓝|优秀个人博客

with4Ai胜于蓝|优秀个人博客

Tags：

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！
如果您认为本文侵犯了您的版权信息，请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/web/html/15.html

扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态

本文地址：/web/html/15.html

很赞哦！ ()