0

我想创建一个页面，在向下滚动页面时可以看到动画，而不是一次。

我已经创建了一个包含四个 css3 动画的页面。它现在在页面加载时立即制作动画。我希望它在向下滚动页面时动画。

我听说 jquery 可以做到，但我不能在那里实现。

我试过 jquery 但没有工作。请帮助。

这是我的错误代码：

<script type="text/javascript">

    $(window).load(function() {
        $("#one").delay(100).fadeInUp();
        $("#two").delay(300).fadeInDown();
        $("#three").delay(600).fadeInRight();
        $("#four").delay(700).fadeInLeft();
        $("body").delay(500).queue(function(next){$(this).addClass("fadeInUp");next();})
    })

div #one、#two、#three 和 #four 各有一个动画。一下子就动起来了。但我希望它在向下滚动时加载。就像： http: //knockknockfactory.com 。代码可在 Github 上找到。请看上面。

4

2 回答 2

0

回答已编辑的问题

这与以前的原理相同，只是在您向下滚动多个px而不是特定时触发div

动画

API 文档

例子

$(document).scroll(function () {

    var y = $(this).scrollTop();

    if (y > (200)) {
        $(".magic").fadeIn('fast').addClass("fadeInDown").removeClass("fadeOutUp");
    }
    if ((y < (200)) && $('.magic').hasClass('fadeInDown')) {
        $(".magic").addClass("fadeOutUp").removeClass("fadeInDown").fadeOut('slow');
    }
    //magic2  
    if (y > (300)) {
        $(".magic2").fadeIn('fast').addClass("fadeInRight").removeClass("fadeOutRight");
    }
    if ((y < (300)) && $('.magic2').hasClass('fadeInRight')) {
        $(".magic2").addClass("fadeOutRight").removeClass("fadeInRight").fadeOut('slow');
    }
    //magic3
    if (y > (400)) {
        $(".magic3").fadeIn('fast').addClass("fadeInLeft").removeClass("fadeOutLeft");
    }
    if ((y < (400)) && $('.magic3').hasClass('fadeInLeft')) {
        $(".magic3").addClass("fadeOutLeft").removeClass("fadeInLeft").fadeOut('slow');
    }
    //magic4
    if (y > (500)) {
        $(".magic4").fadeIn('fast').addClass("fadeInUp").removeClass("fadeOutDown");
    }
    if ((y < (500)) && $('.magic4').hasClass('fadeInUp')) {
        $(".magic4").addClass("fadeOutDown").removeClass("fadeInUp").fadeOut('slow');
    }
});

回答原始问题

页面加载动画完全可以仅在 css 中实现。只需设置一个关键帧动画并将其附加到一个元素上，当该元素加载时，动画就会完成它的工作。

由用户向下滚动到一个元素触发的动画需要一点 jquery。

$(document).scroll(function () {
var y = $(this).scrollTop();
var x = $("#myDiv").position();

if (y > (x.top - 28)) {
    $(".magic").addClass(
        "bounceInRight");
}
else {
    $(".magic").removeClass(
        "bounceInRight");
}
});

例子

于 2013-04-23T00:56:50.497 回答
0

从技术上讲，您只需要 javascript，执行以下操作：

window.onload = function(){
//put animation code here
}

不过，动画本身可能需要 jQuery。据我所知，CSS3 在加载时不会做任何事情。

于 2013-04-23T00:44:17.420 回答