Сегодня мы рассмотрим анимационные эффекты, при которых новые элементы появляются на экране по мере прокрутки страницы. Если все сделано правильно, этот эффект может полностью преобразить ваш дизайн. Эти эффекты делают сайт более живым и интерактивным.
Итак, добавим эффекты анимированной прокрутки на ваш сайт WordPress. Просто следуйте этим нескольким простым шагам.
Для анимации используются WOW.js и Animate.css.
Шаг 1
В каталоге активной темы создать новую папку с именем “CSS” (если не существует).
Скачать animate.min.css и загрузить его в папку CSS.
Шаг 2
В каталоге активной темы создать новую папку с именем “JS” (если существует).
Скачать wow.min.js и загрузить его в папку JS.
Шаг 3
Добавьте следующий код в файл functions.php вашей темы:
//* Enqueue Animate.CSS and WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), '', true );
}
//* Enqueue script to activate WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
//* Add JavaScript before </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
Шаг 4
Теперь вы можете добавить анимацию к любому элементу на вашем сайте с помощью класса “WOW” плюс любой класс из Animate.CSS
Вот пример кода:
<div class="wow bounceInUp">Ваш контент</div>
Расширенные опции
data-wow-duration: Изменение продолжительности анимации
data-wow-delay: Задержка перед началом анимации
data-wow-offset: Расстояние до запуска анимации (от нижней кромки браузера)
data-wow-iteration: Количество повторов анимации
Примеры:
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">Ваш контент</div> <div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10">Ваш контент</div>
Как альтернативу можно использовать небольшой скрипт scrollReveal.js