html动画加载页面效果scrollReveal.js插件

scrollReveal.js 使用方法

html页面引入文件scrollReveal.js 

在需要加载动画效果的div 或者其他标签 中添加 data-scroll-reveal属性

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

然后在js区域加入以下代码：window.scrollReveal = new scrollReveal({reset: true});

data-scroll-reveal属性

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

enter

• 说明: 动画起始方向
• 值: top | right | bottom | left

move

• 说明: 动画执行距离
• 值: 数字，以 px 为单位

over

• 说明: 动画持续时间
• 值: 数字，以秒为单位

after/wait

• 说明: 动画延迟时间
• 值: 数字，以秒为单位