litlleidiot
@litlleidiot
Фронт-Энд разработчик

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

Всем привет, подскажите такую штуку, делаю сайт, подключил animate.css, все прекрасно работает, но все анимации загружаются в одно время на всем сайте. Вопрос, как сделать что бы анимация появлялась только когда доскролишь до блока где она применяется? Сорри за тупой вопрос, если не сложно вкратце как это делается и какой плагин можно юзать не сложный. Спасибо
  • Вопрос задан
  • 2420 просмотров
Решения вопроса 1
@igoravr
Плагин Waypoints поможет
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@slunchenko
Front end developer
Использовать плагин весом, скажем, 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);
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы