С помощью чего делается анимация на лендингах?

Question

[Дима Соколов]

Что используется, для создания анимаций для лендингов? Например прокручиваешь страницу и на блоке, с боку вылетает текст, по частям.
Использовать чистый css или нужны какие, то фреймфорки, js?

Answer 1

[Сергей Горячев]

JS:
viewportchecker.js или wow.js на выбор
CSS:
animate.css, есть и другие, но эта самая популярная

Я чаще всего использую связку viewportchecker + animate.css.

$('.bxslider').addClass('hidden').viewportChecker({ // добавляем класс hidden
// ждем появления блока в поле зрения, чтобы применить к нему анимацию
    classToAdd: 'visible animated fadeIn', // меняем классы, выполняем анимацию
    offset: '50%', // доп параметры, когда начинать анимацию
    repeat: true, // повторять при возвращении снизу вверх
});

PS: Классы hidden и visible нужно добавить в css.
Если используете Bootstrap, то лучше классы сделать другие, чтобы не было конфликта.

Преимущество подключения именно viewportchecker для меня.
То, что его можно использовать для любых скриптов вообще, не только для анимации.
Запуск видео, инициализация слайдера, "убийство" слайдера, особенно animateNumber.js ( описание ) удобно привязать, чтобы анимация цифр срабатывала не при загрузке, а именно в момент скролла до блока.
И библиотека весит совсем немного.

Answer 2

[Дмитрий]

Animate.css + wow.js
Это самое распространенное и легкое

Answer 3

[polifill]

Точно также как и не на лендингах.

Берешь понравившуюся тебе страничку - и смотришь её код.
Код же доступен, в некоторых браузерах еще и отладка есть - все отлично видно.

Comments

[Дима Соколов]

Для новичка в css и js, сложно ориентироваться в чужом коде.