html5页面动画效果css3,三步实现滚动条触动css动画效果

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

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

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

wDY胜于蓝|优秀个人博客

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

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

杨青个人博客

wDY胜于蓝|优秀个人博客

ScrollReveal

wDY胜于蓝|优秀个人博客

ScrollReveal

wDY胜于蓝|优秀个人博客

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

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

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

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

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

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

 wDY胜于蓝|优秀个人博客

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

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

enterwDY胜于蓝|优秀个人博客

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

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

movewDY胜于蓝|优秀个人博客

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

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

overwDY胜于蓝|优秀个人博客

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

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

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

说明: 动画延迟时间

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

填充(可选)wDY胜于蓝|优秀个人博客

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

fromwDY胜于蓝|优秀个人博客

thewDY胜于蓝|优秀个人博客

andwDY胜于蓝|优秀个人博客

thenwDY胜于蓝|优秀个人博客

butwDY胜于蓝|优秀个人博客

withwDY胜于蓝|优秀个人博客

Tags：

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！

如果您认为本文侵犯了您的版权信息，请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/web/html/15.html

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