Как сделать анимацию после Pageload

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

дивы #one, #two, #three и #four каждый из них имеет анимацию. Это оживление сразу. Но я хочу, чтобы он загружался при прокрутке вниз. как: http://knockknockfactory.com. Коды доступны в Github. смотрите выше пожалуйста.

Answer 1

Ответ Под редакцией Вопрос

Это тот же принцип, как и раньше, только срабатывает, когда вы прокрутите вниз ряд px, а не к конкретному div

Animations

• Animate.css -Возврат прохладно подключи и играй 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 ничего не будет делать при загрузке.