Как добавить анимацию в разделы / строки

Когда-то в Интернете добавление анимации на ваш сайт было сложной и довольно узкой задачей. Divi, однако, обладает мощными инструментами анимации и эффектами прокрутки, которые можно реализовать без особых технических знаний. Любой желающий может добавить эти эффекты на свои сайты с минимальными усилиями. Хотя процессы этого руководства могут быть применены к любому элементу в Divi, сегодня мы собираемся сосредоточиться на разделах и строках, чтобы добиться с их помощью определенных эффектов. Давайте углубимся в анимацию!

Предварительный просмотр

Рабочий стол

Мобильный

Загрузите Divi Builder на страницу или в сообщение

Первое, что вам нужно сделать, это войти в Divi Builder. Независимо от того, выберете ли вы один из наших пакетов макетов (мы будем использовать пакет макетов теннисного клуба для этой статьи) или собственный дизайн, все шаги выполняются в настройках раздела и ряда .

В этом дизайне мы будем анимировать 1 раздел и 3 строки, чтобы добиться эффекта последовательной загрузки.

Выберите готовый макет

Чтобы применить один из наших профессионально разработанных пакетов макетов, войдите в Divi Builder и выберите « Использовать готовый макет» . Откроется список всех предлагаемых нами бесплатных услуг.

Выберите макет

Затем просто выберите, какой пакет макетов вы хотите использовать. Вы можете сортировать по категориям или искать по ключевым словам, чтобы увидеть, что мы создали для вас.

Найдите разделы и строки для анимации

Когда макет импортировал все ресурсы и страница загружена, вам нужно будет найти раздел и строку (строки), в которые вы хотите добавить анимацию. Помните, что в Divi Builder разделы обозначены синим цветом, а строки - зеленым .

С этим намеченным, давайте приступим к добавлению этих анимаций!

Как добавить анимацию в разделы и строки - вариант 1

Добавить анимацию в раздел Divi очень просто. Сначала вам нужно войти в настройки раздела . Затем перейдите на вкладку « Дизайн » и прокрутите, пока не увидите параметры анимации .

В разделе « Параметры анимации» вы можете настроить до 8 различных параметров выбранной анимации.

1. Стили анимации - это то место, где вы выбираете способ отображения анимации. Если раздел будет перекатываться из стороны в сторону или отскакивать от края страницы, как мяч. Наиболее распространены Fade и Slide .
2. Направление - вы задаете направление, в котором движется элемент. Значение « вверх» означает, что раздел будет начинаться снизу и двигаться вверх. Вверх не является отправной точкой.
3. Продолжительность - как долго длится анимация от начала до конца. Более низкое значение ускорит его, а более высокое - замедлит.
4. Задержка - этот параметр предотвращает запуск анимации при первой возможности и может помочь привлечь к ней больше внимания, чем если бы она запускалась немедленно.
5. Интенсивность - чем ниже значение, тем плавнее анимация, а при более высоких значениях быстрее и агрессивнее.
6. Начальная непрозрачность - значение 0 приведет к тому, что анимация станет невидимой и будет фокусироваться на протяжении всего времени. 100 означает, что элемент полностью виден еще до начала анимации.
7. Кривая скорости - это позволит вам настроить плавность начала и окончания анимации.
8. Повторить - ваша анимация является одноразовым эффектом или вы хотите повторять ее снова и снова? Если для анимации задано значение « Один раз» , страница должна перезагрузиться, чтобы запустить ее снова.

Как добавить анимацию в разделы и строки - вариант 2

Divi также имеет функцию, называемую эффектами прокрутки . Это анимации, которые запускаются всякий раз, когда пользователь прокручивает окно просмотра до элемента. Эффекты прокрутки могут быть установлены для любого элемента и могут быть объединены с параметрами анимации , которые мы упоминали выше.

Как включить эффекты прокрутки

Опять же, для любого элемента в Divi можно настроить эффекты прокрутки, но сегодня мы имеем дело с разделами и строками. Итак, введите настройки раздела , перейдите на вкладку « Дополнительно » и найдите заголовок « Эффекты прокрутки» .

Выберите эффекты и триггеры

В параметрах эффектов прокрутки вы найдете различные вкладки для различных видов анимации, которые можно запускать при прокрутке.

• Прикрепленное положение - прилипает ли раздел или строка к экрану пользователя при прокрутке.
• Эффекты преобразования - это фактические эффекты анимации: горизонтальное и вертикальное движение, постепенное появление / исчезновение, масштабирование, вращение и размытие.
• Установите [Feature] - вы сможете установить, где эффект наиболее заметен на экране и когда / где он возникает.
• Триггер эффекта движения - вы определите, начинается ли анимация, когда верх элемента входит в область просмотра, центр элемента или нижнюю часть.

Основное различие между ними и использованием параметров анимации в предыдущем разделе сводится к тому, хотите ли вы, чтобы анимация была автоматизированной или запускалась каждый раз, когда пользователь выполняет действие. Вы можете комбинировать анимации, используя параметры прокрутки и анимации, которые мы будем использовать для эффекта основного учебника.

Объединение анимаций для разделов и строк

Вы можете создавать потрясающие эффекты для своих сайтов, комбинируя различные анимации, которые будут запускаться в разное время. Используя параметр « Задержка анимации» , ваш сайт может последовательно анимировать серию разделов, строк и элементов, чтобы получить впечатляющие визуальные эффекты.

Для начала мы собираемся установить стиль анимации в настройках раздела на « Сдвиг», а для параметра « Направление анимации» - « Вверх» .

Остальные параметры оставим по умолчанию. Особенно задержка анимации . Мы хотим, чтобы Раздел запускался, когда он находится в поле зрения.

Настройки анимации для строки 1

Далее мы настроим первую строку в разделе. Мы заходим в настройки строки , переходим к параметрам анимации на вкладке « Дизайн » и снова выбираем « Слайд» . На этот раз мы хотим изменить Направление на Вниз и Задержку анимации на 5 00 мс . Помните, что 1000 мс равно 1 секунде.

Так как мы оставили время секции равным 0 мс для немедленного запуска, мы хотим, чтобы строка была немного смещена, чтобы начальная анимация в основном завершилась до того, как начнется эта.

Настройки анимации для строки 2

Затем мы собираемся перейти к настройкам второй строки страницы и перейти к параметрам анимации . Опять же, мы выберем « Слайд» в качестве стиля анимации , и эта строка будет сдвигаться вправо .

Кроме того, мы собираемся установить задержку анимации на 1000 мс , что означает, что она сработает, как только закончится первая анимация.

Настройки анимации для строки 3

Для третьей строки, которую мы анимируем, мы собираемся использовать эффекты прокрутки для достижения наших целей. Поскольку наша третья строка начинается чуть выше сгиба, большинство анимаций было бы невидимо, если бы мы просто использовали временную задержку, как мы это делали с другими элементами. Так что мы сделаем так, чтобы это было не так.

Параметры анимации

Во-первых, мы собираемся повторить описанные выше процессы. Только в этой строке мы устанавливаем для стиля анимации значение «Затухание». Затем мы установим Duration на 500 мс, чтобы эта строка появлялась быстрее во время анимации. Мы Задержать его 1500ms , чтобы гарантировать , что другие анимации полностью завершены до этого начинается.

Наконец, убедитесь, что начальная непрозрачность установлена ​​на 0% . Мы хотим, чтобы эта строка была невидимой до тех пор, пока она не будет готова к просмотру.

Настройки эффектов прокрутки

Здесь все становится весело, потому что мы можем комбинировать эффекты. Щелкните вкладку « Дополнительно » для строки и найдите « Эффекты прокрутки» . Найдите вкладку « Горизонтальное движение » и обязательно включите ее. Затем установите для триггера эффекта движения значение « Середина элемента» . Мы используем середину, а не верх, чтобы гарантировать, что эффект не начнет действовать до тех пор, пока пользователь не прокрутит, на всякий случай, если в окне просмотра пользователя отображается верхняя часть строки.

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

Окончательные результаты

Когда вы закончите все это, ваши результаты должны быть похожи на эти.

Рабочий стол

Мобильный

Заключение

Добавление эффектов анимации - верный способ сделать ваш сайт более динамичным, интересным и визуально привлекательным. Используя встроенные инструменты анимации и эффектов прокрутки Divi, вы можете создавать удивительные комбинации, которые поразят любого посетителя, который случайно зайдет.

Какие эффекты анимации Divi вы использовали для создания из секций и строк? Увидим их в комментариях!

Изображение для статьи от Vectorchok / shutterstock.com