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

现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，

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

1、引入文件

2、html页面

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

个人博客

ScrollReveal

ScrollReveal

3、JavaScript

data-scroll-reveal属性

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

enter

说明: 动画起始方向

v

值: top | right | bottom | left

move

说明: 动画执行距离

值: 数字，以 px 为单位

over

说明: 动画持续时间

值: 数字，以秒为单位

after/wait

说明: 动画延迟时间<

值: 数字，以秒为单位

填充（可选）

可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：

from

the

and

then

but

with

Tags：动画效果

转载：感谢您关注张升分享网站 。欢迎朋友们分享至个人网站或朋友圈。本站内容部分来自网络或用户投稿，仅供学习交流。如有侵权，请联系删除。ihze.com/share/network/15.html

赞

打赏

感谢您的支持，我会继续努力!

扫码打赏，建议金额1-10元

打开支付宝扫一扫，即可进行扫码打赏哦