Статья Библиотека wow.js

Saivior

Интересующийся

Saivior

Интересующийся
Статус
Оффлайн
Регистрация
20 Июн 2019
Сообщения
14
Реакции
8
Рассмотрим библиотеку WOW.js.
Что такое WOW.js - это по сути дополнение к библиотеки animate.css, которая позволяет задержать анимацию блоков, которые ещё не прогружены пользователем.

Подключение

Подключение библиотеки делается буквально в 2 клика:

1. Переходим на официальный github wow.js
Пожалуйста, авторизуйтесь для просмотра ссылки.
и скачиваем файл wow.min.js, который находится в папке dist.
2. Перекидываем файл wow.min.js в папку с нашим проектом.
3. Открываем наш html файл и в конце тэга <body> подключаем наш скрипт:


HTML:
<script src="wow.min.js"></script>
<script> new WOW().init(); </script>


Использование

Создаём страницу html с несколькими блоками:

Первый блок будет виден сразу при заходе на страницу, второй же будет доступен при скролле вниз.

Для второго блока(невидимого), который мы хотим анимировать добавляем в class стиль "wow".

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <title>Animate</title>
</head>
<body>
    <section class="header">
        <div class="title">Animate.css</div>
    </section>
    <section class="page__body">
        <div class="text-items">
            <div class="body-title wow">Hello datastock!</div>
            <div class="subtitle wow">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum laudantium sequi omnis ad at quod pariatur saepe, atque itaque tenetur deleniti aliquam debitis dolores totam, provident, alias recusandae temporibus voluptates.</div>
        </div>
        <div class="img-items wow">
            <div class="img-column">
                <div class="img"><img src="https://avotar.ru/avatar/krutye/150/78.jpg"></div>
            </div>
            <div class="img-column">
                <div class="img"><img src="https://avotar.ru/avatar/krutye/150/76.jpg"></div>
            </div>
            <div class="img-column">
                <div class="img"><img src="https://avotar.ru/avatar/multyashki/150/2.jpg"></div>
            </div>
        </div>
    </section>
<script src="wow.min.js"></script>
<script> new WOW().init(); </script>
</body>
</html>

Добавим стилей:

CSS:
html, body /*Убираем отступы*/
{
    margin: 0;
    padding: 0;
}

.header
{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 80px;
    font-family: Arial;
    height: 1200px;
}

.title /*Добавляем анимацию для видимого блока*/
{
    font-size: 30px;
    animation: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.page__body
{
    overflow: hidden;
    font-family: Arial;
    background-color:rgb(16, 17, 22);
    height: 1200px;
}

.text-items
{
    margin-top: 80px;
}

.body-title /*Добавляем анимацию для невидимого блока*/
{
    display: flex;
    width: 100%;
    justify-content: center;
    color:#fff;
    opacity: 0.8;
    font-size: 30px;
    animation: bounceInLeft;
    animation-duration: 2s;
}

.subtitle /*Добавляем анимацию для невидимого блока*/
{
    color:#fff;
    opacity: 0.8;
    margin-top: 30px;
    margin-left: 20px;
    animation: bounceInRight;
    animation-duration: 2s;
}

.img-items /*Добавляем анимацию для невидимого блока*/
{
    display: flex;
    width: 100%;
    justify-content: center;
    animation: bounceInUp;
    animation-duration: 2s;
}

.img-column
{
    display: inline-flex;
    margin-left: 20px;
    margin-top: 50px;
}

.img img
{
    width: 150px;
    height: 150px; 
}

В итоге мы получаем такой эффект:

Desktop 2022.04.08 - 15.03.56.02.gif


Тема с разбором библиотеки animate.css: https://datastock.biz/threads/biblioteka-animate-css.3806/
Официальный сайт wow.js:
Пожалуйста, авторизуйтесь для просмотра ссылки.
 
Сверху