Как сделать что бы анимация появлялась только когда до блока доскролишь?

Question

[Юрий Кучеренко]

Всем привет, подскажите такую штуку, делаю сайт, подключил animate.css, все прекрасно работает, но все анимации загружаются в одно время на всем сайте. Вопрос, как сделать что бы анимация появлялась только когда доскролишь до блока где она применяется? Сорри за тупой вопрос, если не сложно вкратце как это делается и какой плагин можно юзать не сложный. Спасибо

Answer 1

[Igor]

Плагин Waypoints поможет

Answer 2

[Stanislav Slyunchenko]

Использовать плагин весом, скажем, 50 Кб для анимации контента весом 4Кб - как минимум странно :).
Самый простой пример:

var el_1_top = $('.block-1').offset().top, el_2_top = $('.block-2').offset().top;
$(window).scroll(function(){
if ($(window).scrollTop() >= el_1_top) {
//first block animation
} else {
//reverse animation (optional)
};
if ($(window).scrollTop() >= el_2_top) {
//second block animation
} else {
//reverse animation (optional)
};
});

Еще лучше будет запихнуть анимацию с проверками в функцию и вызвать ее отдельно на документ.реди и отдельно на скролл:

var animation = function() {...};
animation();
$(window)scroll(animation);