滚动条触发CSS3动画

最新推荐文章于 2024-09-21 11:48:19 发布

布鲁斯基

最新推荐文章于 2024-09-21 11:48:19 发布

阅读量7k

点赞数 1

分类专栏： html5+css3

html5+css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浏览器向下滚动时，页面的CSS3 transform、animation就被触发了。
想要达到这种效果，有很多 jQuery 插件可以用，这里将展示不使用插件做到这种效果。

HTML
Javascript 和 CSS animation
扩展阅读：Modernizr.js

HTML

<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<link rel="stylesheet" type="text/css" href="animate.min.css">
</head>

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

.revealOnScroll 必须加在滚动时需要触发动效的元素上面。
data-animation 声明了使用animation的名字，仅限 animation.css 支持的动效
timeout 定义了在滚动条件满足时，延时多少时间触发动画

Javascript 和 CSS animation

<script>
$(function() {

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


    //如果是移动设备，直接加上动画预置类
    if (isTouch) { $('.revealOnScroll').addClass('animated'); }

    //监听滚动事件，触发函数
    $window.on('scroll', revealOnScroll);

    //revealOnScroll 函数检查元素是否需要执行动画，是，animation类就会添加并触发
    function revealOnScroll() {
        var scrolled = $window.scrollTop(),
        win_height_padded = $window.height() * 1.1;

        //Showed...
        $(".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'));
                }
            }
        });

        //Hidden...
        $(".revealOnScroll.animated").each(function (index) {
            var $this = $(this),
            offsetTop = $this.offset().top;
            if (scrolled + win_height_padded < offsetTop) {
                $(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
            }
        });
    }

revealOnScroll();

});

当元素不可见的时候，animation类被移掉，这样在一次请求里面多次animate动画。

原文地址：http://www.w3cplus.com/css3/trigger-css-animation-scroll.html

扩展阅读：Modernizr.js

modernizer.js 判断浏览器是否支持html5和css3的新特性
官方站点：http://modernizr.com

<script src="Scripts/Modernizr.js" type="text/javascript"></script>

添加完 Modernizr 引用以后，立即生效。
它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性。

支持的特性，直接显示该特性的名称作为一个class（例如：canvas, websockets），
不支持的特性，显示的class是“no-特性名称”（例如：no-flexbox）。

下面这段代码是运行在Chrome下的效果：

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage 
              websqldatabase indexeddb hashchange history draganddrop websockets 
　　　　　　　　rgba hsla multiplebgs backgroundsize borderimage borderradius 
　　　　　　　　boxshadow textshadow opacity cssanimations csscolumns cssgradients
　　　　　　　　cssreflections csstransforms csstransforms3d csstransitions fontface 
　　　　　　　  generatedcontent video audio localstorage sessionstorage webworkers 
              applicationcache svg inlinesvg smil svgclippaths">

下面这段代码是运行在IE9下的效果：

<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
              postmessage no-websqldatabase no-indexeddb hashchange no-history 
　　　　　　　　draganddrop no-websockets rgba hsla multiplebgs backgroundsize 
　　　　　　　　no-borderimage borderradius boxshadow no-textshadow opacity 
　　　　　　　　no-cssanimations no-csscolumns no-cssgradients no-cssreflections
　　　　　　　　csstransforms no-csstransforms3d no-csstransitions fontface 
　　　　　　　　generatedcontent video audio localstorage sessionstorage 
　　　　　　　　no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

原文地址：https://segmentfault.com/a/1190000003820989