Главная > Блог > Web-разработка > HTML и CSS >

Анимация элементов страницы

17.02.2019

Animate.css — библиотека CSS3-эффектов анимации, созданная на самом же CSS3. На официальном сайте можно посмотреть все возможные для этой библиотеки эффекты и подобрать подходящий в выпадающем списке. Использовать библиотеку очень легко.

Для начала следует скачать и подключить файл animate.css:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Animate</title>
    <link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
    ..........
</body>
</html>

Теперь, чтобы применить анимацию к элементу, добавляем класс animated и класс с названием эффекта, допустим pulse:

<body>
    <h1>Lorem ipsum dolor sit amet</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis...
    </p>
    <img src="img/picture.jpg" alt="" class="animated pulse"> <!-- анимация для изображения -->
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis...
    </p>
</body>

Применяем анимацию к элементу с использованием JavaScript:

document.addEventListener('DOMContentLoaded', function () {
    const image =  document.querySelector('img');
    image.classList.add('animated', 'pulse');
});

Добавляем анимацию для всех изображений на странице:

$(document).ready(function() {
    $('img').addClass('animated pulse'); 
});

Чтобы анимация срабатывала при наведении на изображение курсора мыши:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Animate</title>
    <link href="css/animate.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#gallery > img').hover(
                function() {
                    $(this).addClass('animated pulse');
                },
                function() {
                    $(this).removeClass('animated pulse');
                }
            );
        });
    </script>
</head>
<body>
    <div id="gallery">
        <img src="img/thumb1.jpg" alt="">
        <img src="img/thumb2.jpg" alt="">
        <img src="img/thumb3.jpg" alt="">
        <img src="img/thumb4.jpg" alt="">
    </div>
</body>
</html>

Анимация при прокрутке страницы

Если страница длинная, пользователь не увидит анимацию элементов за пределами окна браузера. Скрипт wow.js позволяет сделать так, чтобы анимация срабатывала только тогда, когда пользователь прокручивает страницу. Скачиваем, подключаем и инициализируем:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Animate</title>
    <link rel="stylesheet" href="css/animate.min.css">
    <script src="js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
</head>
<body>
    ..........
</body>
</html>

Теперь необходимо добавить к элементам страницы класс wow, который скрывает элемент и класс с названием эффекта, например pulse:

<body>
    <section class="wow pulse">
        .....
    </section>
    <section class="wow pulse">
        .....
    </section>
    <section class="wow pulse">
        .....
    </section>
</body>

Дополнительные опции могут быть заданы с помощью атрибутов:

data-wow-duration — продолжительность анимации в секундах
data-wow-offset — расстояние от нижнего края браузера для начала анимации
data-wow-delay — задержка перед началом анимации
data-wow-iteration — сколько раз повторять анимацию

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
    .....
</section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="3">
    .....
</section>

Пользовательские настройки:

wow = new WOW({
    boxClass:     'wow',      // default
    animateClass: 'animated', // default
    offset:       0,          // default
    mobile:       true,       // default
    live:         true        // default
});
wow.init();

boxClass — имя класса для элементов, которые надо анимировать при прокрутке страницы
animateClass — имя класса, которое запускает анимацию (для библиотеки animate.css — animated)
offset — расстояние от нижнего края браузера до верхнего края скрытого блока wow
mobile — включение или отключение анимации для мобильных устройств
live — отслеживать появление новых wow-элементов на странице (например, загруженных с помощью ajax)

В браузерах Chrome и Firefox анимация может не работать, если в настройках Windows отключена настройка «Показывать анимацию в Windows».

Поиск: CSS • HTML • JavaScript • Верстка • Анимация • animate.css • wow.js