滚动条触发CSS3动画

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

在这篇教程中,我将为你介绍如何在页面滚动时触发CSS动画。这种效果使用JavaScript和CSS就能做到。

Jeet Grid System website 就是使用这种小技巧的例子,当你向下滚动的时候,CSS的transformanimation就被触发了。

想要达到这种目的,有很多Javascript/jQuery 插件可以用,比如WOW,在这篇教程中,我将为你展示如何不适用插件做到这种效果。

模板

那么我们开始了,首先是写好HTML标签,revealOnScroll类必须家在需要在滚动时触发的元素上面。

<div data-animation="flipInX" data-timeout="400">...some content here...

data-animation这个属性声明了将会触发animation.css中animation的名字,当然添加额外的timeout参数也可以使用同样的方法,这样做当你有很多元素在同个位置被触发时很有用。

Javascript 和 CSS animation

然后,我们需要定义一些变量在JavaScript文件的顶部,(不要忘记加载jQuery和Modernizr需要检查是否为触摸设备)。还有为了实现动画效果,我加载了animation.css

var $window           = $(window),
win_height_padded = $window.height() * 1.1,
isTouch           = Modernizr.touch;

然后我们需要监听滚动事件,并触发我们的函数。

$window.on('scroll', revealOnScroll);

revealOnScroll函数里面我们检查元素是否需要执行动画,如果是,animation类就会添加,并触发了CSS animation。

function revealOnScroll() {
    var scrolled = $window.scrollTop();
     $(".revealOnScroll:not(.animated)").each(function () {
       var $this     = $(this),
           offsetTop = $this.offset().top;

       if (scrolled + win_height_padded > offsetTop) {
         if ($this.data('timeout')) {
           window.setTimeout(function(){
             $this.addClass('animated ' + $this.data('animation'));
           }, parseInt($this.data('timeout'),10));
         } else {
           $this.addClass('animated ' + $this.data('animation'));
         }
       }
});

是不是很容易就完成了~ 还有另一个小技巧,当元素不可见的时候,animation类被移掉,这样在一次请求里面多次animate动画。

本文根据@Benoît Boucart的《ANIMATIONS ON SCROLL》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blog.webbb.be/trigger-css-animation-scroll/

HelKyle

我是周晓楷,华南师范大学在校本科生,有轻微强迫症,拖延症,正在努力学习前端知识!微博@Helkyle。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/trigger-css-animation-scroll.htmlNike Paul George PG3

如需转载,烦请注明出处:https://www.w3cplus.com/css3/trigger-css-animation-scroll.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部