Анимация элементов в HTML с помощью CSS и JS используя плагин WOW.js
Используем библиотеку WOW.js документация здесь.
Подключаем анимацию с помощью WOW.js
1. Подключаем библиотеку анимаций Animate.css
(можно подключить любую другую библиотеку для анимации, и указать ее в опциях WOW.js)
2. Подключаем и активируем WOW.js
new WOW().init();
Анимируем элементы на странице
Добавляем элементу класс .wow – элемент будет невидимым, пока пользователь не проскролит страницу до него (в настройках WOW.js можно изменить имя класса, чтобы избежать конфликтов).
UPD Для того, чтобы не было мигания элементов на первом экране, которое происходит, когда сайт большой и скрипты прогружаются на доли секунды позже HTML, то есть анимация подключается после того, как уже отобразилась страница, и сначала скрывает элемент а потом его анимирует, то нужно для анимируемых элементов задать правило visibility: hidden;
Можно задать его для отдельных классов или сразу для всех анимируемых элементов, которые имеют общий класс .wow :
Counter Strike Source: Warcraft Source Server
Выберите стиль анимации в Animate.css, затем добавьте класс CSS в анимируемый элемент HTML