吴彦祖

您现在的位置是: 网站首页 >  个人博客 >  福利分享 > 

个人博客

一个非常还用的网页加载动画插件

2020-10-30 11:13:46 个人博客 11
插件名字叫scrollReveal.js。不同于WOW.js,scrollReveal.js是独立的,无需依赖animate.css。并且插件非常小,压缩后的版本只有5.6kb。使用方法也非常简单。

简介

插件名字叫scrollReveal.js。不同于WOW.js,scrollReveal.js是独立的,无需依赖animate.css。并且插件非常小,压缩后的版本只有5.6kb。使用方法也非常简单。

引入:用script像通常一样引入即可。需要注意的是,如果你使用的jquery,记得卸载jquery之后。

使用:在div上,或者你想要有动画效果的标签上加上data-scroll-reveal。

示范:<div data-scroll-reveal="enter left and move 50px over 1.33s">dowebok.com</div>


data-scroll-reveal属性

enter

说明: 动画起始方向

值: top | right | bottom | left

move

说明: 动画执行距离

值: 数字,以 px 为单位

over

说明: 动画持续时间

值: 数字,以秒为单位

after/wait

说明: 动画延迟时间

值: 数字,以秒为单位

填充(可选)

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

from

the

and

then

but

with