页面加载后如何制作动画

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

对已编辑问题的回答

这和以前的原理一样，只是在你向下滚动多个px而不是特定的div时触发

动画

• Animate.css -Wicked 很酷的即插即用 CSS 动画

API 文档

• .scroll()
• .scrollTop()
• .fadeIn()
• .fadeOut()

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

Answer 2

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

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

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