scrollReveal.js 制作onScroll动画效果

scrollReveal 主要是在制作单页应用时当手机屏幕滑动到最底部时候加载数据的效果,它实现了data-属性来语义化效果。

技术点 CSS3 动画效果 和 监听页面加载到底部的脚本。

使用方法

1 引用脚本

<script src='https://github.com/jlmakes/scrollReveal.js'></script>

2 添加html

<div class="myAnimatedElement" data-scroll-reveal="enter top move 50px, after 0.9s"> Ligula Venenatis Aenean Mollis Ultricies</div>
  • enter – controls the vector origin of your reveal animation (possible values: top, right, bottom, left).
  • move – the distance your element travels when being revealed (for example 123px).
  • over – duration of your reveal animation (for example 10s, 0.5s, 1.34s).
  • after/wait – the delay before your reveal begins.

出处 https://www.gavick.com/blog/scrollreveal-js-the-easiest-way-to-create-on-scroll-animations

github https://github.com/jlmakes/scrollReveal.js

posted @ 2015-07-20 22:19  一渡  阅读(457)  评论(0)    收藏  举报