Использование анимации Divi для плавания и отскока изображения
Опубликовано: 2017-10-20Добро пожаловать в 6 часть этой серии из 6 частей, в которой вы узнаете, как использовать новые параметры анимации Divi для создания потрясающих разделов страницы. Я собираюсь рассказать вам, как создавать различные разделы нашей живой демонстрационной страницы, чтобы показать вам методы добавления анимации на ваш сайт. Функции анимации действительно забавны и просты в использовании. А с Visual Builder вы можете увидеть, как ваше творение оживает на каждом этапе. Приходите и присоединяйтесь ко мне, когда мы исследуем возможности анимации Divi.
В последнем посте мы создали раздел 7 нашей демонстрационной страницы анимации, где я показал вам, как анимировать изображения, используя стиль анимации прокрутки, чтобы добавить реалистичное движение вашему контенту.
Сегодня мы займемся разделами 8 и 9 нашей демонстрационной страницы анимации. Раздел 8 - отличный пример того, как выделить избранный элемент, используя комбинацию слайд-анимации и эффектов размытия. Раздел 9 - это простой и элегантный способ добавить анимацию в раздел команды, демонстрирующий фотографии вашей команды.
Давайте начнем.
Вот краткий обзор того, что мы будем строить в сегодняшнем посте
Подготовка элементов дизайна
Для этого урока вам понадобятся четыре изображения. Вам понадобится собственное фоновое изображение и три изображения карточек с рецептами. Фоновое изображение имеет размер 1280 × 936 и желтый фон с 6 полупрозрачными белыми прямоугольниками с добавленным затемнением для глубины. Когда фон используется в разделе с параллаксом, создается впечатление, что карты рецептов плавают на заднем плане. Каждое изображение карты рецепта имеет размер 375 × 667. Вот изображения, используемые в этом уроке.
Фоновая картинка
Изображение карты рецепта №1
Изображение карты рецепта №2
Изображение карты рецепта №3
Использование анимации Divi для плавания и отскока изображения
Подпишитесь на наш канал Youtube
Строительная секция 8
Перед тем, как мы начнем процесс сборки, вот краткий обзор каркасного вида макета разреза, который мы будем создавать с помощью визуального построителя.
Используя Visual Builder, давайте начнем с добавления еще одного обычного раздела в наш макет. Затем добавьте в свой раздел строку из трех столбцов (одна треть, одна треть, одна треть).
Обновить настройки строки
Прежде чем мы добавим наш первый модуль, перейдите в настройки строки и обновите следующее:
На вкладке "Дизайн"…
Использовать нестандартную ширину: ДА
Настраиваемая ширина: 1366 пикселей
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 1
Пользовательское заполнение столбца 1: 6% справа
Пользовательское заполнение столбца 3: 8% слева
Добавить фон в свой раздел
Далее поместим в наш раздел основное фоновое изображение. Перейдите в настройки раздела и обновите следующее:
На вкладке "Содержание"…
Фоновое изображение: [вставить изображение 1280 × 936]
Использовать метод параллакса: ДА
Метод параллакса: истинный параллакс
Добавить изображение # 1
Теперь мы готовы добавить наши модули в нашу строку. В первом (левом) столбце добавьте модуль изображения.
Затем обновите настройки следующим образом:
На вкладке "Содержание"…
URL изображения: [введите изображение карты рецепта №1]
На вкладке "Дизайн"…
Принудительная полная ширина: ДА
Стиль анимации: слайд
Направление анимации: вверх
Интенсивность анимации: 20%
На вкладке "Дополнительно"…
Здесь мы собираемся добавить немного настраиваемого CSS, чтобы придать изображению карточки закругленные края, тень блока и фильтр размытия. Введите следующий CSS в поле «Основные элементы»:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(2px) opacity(.75);
Сохранить настройки
Добавьте два текстовых модуля в средний столбец
Затем добавьте текстовый модуль во второй (или средний) столбец и обновите настройки следующим образом:
На вкладке "Содержание"…
Введите следующий заголовок h1 в текстовую вкладку поля содержимого:
<h1>The Best Recipes for Success</h1>
На вкладке "Дизайн"…
Шрифт заголовка: Playfair Display, жирный (B)
Размер шрифта заголовка: 60 пикселей
Высота строки заголовка: 1,3 мкм
Пользовательское поле: нижнее 20 пикселей
Стиль анимации: сложить
Направление анимации: вверх
Сохранить настройки
Добавьте еще один текстовый модуль под только что созданный и обновите настройки следующим образом:
На вкладке "Содержание"…
Содержимое: Lorem ipsum dolor sit amet, conctetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur.
На вкладке "Дизайн"…
Размер шрифта текста: 18 пикселей
Цвет текста текста: rgba (0,0,0,0.56)
Высота текстовой строки: 1.9em
Пользовательское поле: 40 пикселей
Стиль анимации: сложить
Направление анимации: вниз
Задержка анимации: 150 мс
Сохранить настройки
Добавить изображение # 2
Добавьте модуль изображения под двумя только что созданными текстовыми модулями.
Затем обновите настройки следующим образом:
На вкладке "Содержание"…
URL изображения: [введите изображение карточки №2]
На вкладке "Дизайн"…
Принудительная полная ширина: ДА
Стиль анимации: слайд
Направление анимации: вверх
Интенсивность анимации: 10%
На вкладке "Дополнительно"…
Здесь мы собираемся добавить собственный CSS (аналогичный первому изображению карточки, за исключением эффекта размытия), чтобы придать изображению карточки закругленные края и тень блока. Введите следующий CSS в поле «Основные элементы»:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
Сохранить настройки
Добавить изображение # 3
Давайте добавим наше третье и последнее изображение карточки в третий (или правый) столбец, вставив модуль изображения:
Затем обновите настройки следующим образом:
На вкладке "Содержание"…
URL изображения: [введите изображение карточки №3]
На вкладке "Дизайн"…
Принудительная полная ширина: ДА
Специальная маржа: 20% сверху
Стиль анимации: слайд
Направление анимации: вверх
Интенсивность анимации: 30%
Сохранить настройки
На вкладке "Дополнительно"…
Добавьте этот настраиваемый CSS в поле Main Element:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(8px) opacity(.4);
Сохранить настройки
Большой! На этом завершается раздел 8 нашей демонстрационной страницы. Проверьте окончательный результат.
Анимация на удивление реалистична и отлично использует функцию параллакса, которая перемещает фон вниз с другой скоростью, чем модули, расположенные сверху при прокрутке. Тот факт, что карты анимированы вверх, а фон опускается вниз, создает впечатление парящих карт. Я должен сказать, что содержание этого раздела действительно привлекает внимание.
Строительная секция 9 демонстрации
В нашем последнем разделе мы собираемся создать простой раздел «Наша команда» с небольшой анимацией, которая буквально «всплывает». Вот что мы собираемся построить:
Вот краткий обзор макета в каркасном виде.
Добавить заголовок раздела
Сначала добавьте обычный раздел со строкой из одного столбца. затем добавьте в столбец текстовый модуль.
Обновите настройки текста следующим образом:
На вкладке "Содержание"…
Содержание: Наша команда
На вкладке "Дизайн"…
Шрифт текста: Raleway, жирный (B), прописные (TT)
Размер шрифта текста: 15 пикселей
Цвет текста текста: rgba (0,0,0,0.32)
Расстояние между буквами текста: 5 пикселей
Высота текстовой строки: 1.9em
Пользовательское поле: 20 пикселей
Стиль анимации: слайд
Направление анимации: вверх
Продолжительность анимации: 500 мс
Задержка анимации: 1000 мс
На вкладке "Дополнительно"…
Сохранить настройки
Добавьте еще один текстовый модуль под тем, который вы только что создали, и обновите настройки следующим образом:
На вкладке "Содержание"…
Введите следующий тег h1 на текстовой вкладке поля содержимого:
<h1>Highly Skilled Ninjas</h1>
На вкладке "Дизайн"…
Шрифт заголовка: Raleway Light
Выравнивание текста заголовка: по центру
Размер шрифта заголовка: 48 пикселей
Цвет текста заголовка: # 3a3830
Высота строки заголовка: 1,3 мкм
Пользовательское поле: нижнее 20 пикселей
Стиль анимации: слайд
Направление анимации: вправо
Интенсивность анимации: 12%
Сохранить настройки
Теперь, чтобы добавить небольшую зеленую разделительную линию, добавьте модуль разделителя под текстовым модулем.
Затем обновите настройки разделителя следующим образом:
На вкладке "Содержание"…
Показать разделитель: ДА
На вкладке "Дизайн"…
Цвет: # 7cda24
Вес разделителя: 3 пикселя
Высота: 3 пикселя
Ширина: 60 пикселей (введите это)
Выравнивание модуля: по центру
Стиль анимации: слайд
Направление анимации: вниз
Продолжительность анимации: 500 мс
Задержка анимации: 1000 мс
Интенсивность анимации: 200%
Сохранить настройки
Добавление четырех изображений команды
Чтобы добавить изображения членов нашей команды, добавьте строку из четырех столбцов под строкой, содержащей только что созданный заголовок.
Добавьте модуль Person в первый столбец и обновите настройки следующим образом:
На вкладке "Содержание"…
Имя: Ник
URL изображения: [введите свое фото размером 150 × 150]
На вкладке "Дизайн"…
Шрифт заголовка: Raleway Light, жирный (B), прописные (TT)
Размер шрифта заголовка: 13 пикселей
Цвет текста заголовка: rgba (0,0,0,0.71)
Расстояние между буквами заголовка: 3 пикселя
На вкладке "Дополнительно"…
Добавьте следующий CSS в поле Изображение участника:
border-radius: 100%; overflow: hidden; width: 180px; margin: auto auto 20px auto;
Это придаст нашему изображению красивую рамку в виде круга.
Добавьте следующий настраиваемый CSS к описанию элемента:
text-align: center; display: block;
Это центрирует Имя.
Сохранить настройки
Теперь вы можете продублировать только что созданный модуль Person, чтобы добавить следующие три для заполнения следующих трех столбцов. Все, что вам нужно сделать, это обновить изображение и имя для каждого из дублируемых модулей.
После того, как вы добавили все четыре своих персональных модуля, вы готовы к последнему шагу в этом разделе, который заключается в стилизации и анимации строки. Для этого обновите настройки строки следующим образом:
На вкладке "Дизайн"…
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 2
Пользовательские отступы: верх 60 пикселей
Стиль анимации: отскок
Продолжительность анимации: 700 мс
Задержка анимации: 1000 мс
На этом завершается раздел 9 нашей демонстрационной страницы анимации. И он также завершает серию из 6 частей об использовании анимации с Divi.
Завершение серии
Надеюсь, вам понравилось создавать нашу демонстрационную страницу анимации. Сам по себе дизайн - большое вдохновение. И использование анимации повсюду, без сомнения, послужит справочным руководством для будущих сборок страниц. Особая благодарность нашему директору Кенни Сингу за создание этого макета. Мы так гордимся этим, мы хотим предложить вам этот макет бесплатно, чтобы помочь вам начать свой следующий проект.
Бонус: загрузите эти разделы для удобного импорта
В качестве дополнительного бонуса мы упаковали разделы, построенные в сегодняшнем руководстве, в бесплатную загрузку, которую вы можете получить, используя форму подписки по электронной почте ниже. Просто введите свой адрес электронной почты, и появится кнопка загрузки. Не беспокойтесь о «повторной подписке», если вы уже являетесь участником нашего информационного бюллетеня Divi. Повторный ввод адреса электронной почты не приведет к появлению новых писем или дубликатов. Он просто откроет загрузку.
Наслаждаться!
Загрузить пакет макетов
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы использовать эти загрузки, сначала найдите заархивированный файл All_Animation_Effects_1.zip в нашей папке загрузок. Разархивируйте его, чтобы увидеть весь импорт из этой серии, включая последние два для этого поста.
Перейдите в админке WordPress к Divi> Библиотека Divi> Импорт и экспорт. Когда появится модальное окно переносимости, щелкните вкладку импорта и кнопку с надписью «Выбрать файл».
Выберите предпочитаемый файл json и нажмите «Импортировать макеты Divi Builder». После завершения импорта перейдите к сообщению или странице, в которую вы хотите добавить один из указанных выше разделов.
Активируйте визуальный конструктор. Перейдите к той части страницы, в которую вы хотите добавить один из указанных выше разделов. Когда вы щелкните значок добавления нового раздела, вам будет предложена опция «Добавить из библиотеки». Выберите этот вариант и выберите нужный макет.
Я с нетерпением жду вашего ответа в комментариях ниже.
Ваше здоровье!