Question

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

我已经创建了一个包含四个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上获得。请看上面。

Answer 1

你只需要技术上需要javascript，做这样的事情：

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

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

Answer 2

回答编辑问题

这与以前的原则相同，只是在您向下滚动一些px而不是向特定div

时触发

<强>动画

Animate.css - 糟糕的即插即用CSS动画

API文档

<强> Example

$(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");
}
});

Example

如何在页面加载后制作动画

2 个答案: