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

scrollReveal.js 使用方法


html页面引入文件scrollReveal.js 

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

dowebok.com


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



data-scroll-reveal属性

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

enter

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

move

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

over

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

after/wait

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

你可能感兴趣的:(html动画加载页面效果scrollReveal.js插件)