Как объединить анимацию и параллакс в Divi для уникального дизайна
Опубликовано: 2019-08-07Готовим ли мы еду или создаем веб-сайт, одни только ингредиенты не гарантируют вкусное блюдо или красивый сайт. Главное отличие в том, насколько хорошо мы сочетаем эти элементы. В этом уроке я покажу вам, как комбинировать анимацию и параллакс изображения таким способом, о котором вы, возможно, никогда раньше не задумывались. Если вы еще не знаете, анимация - это встроенная функция Divi, которую можно добавить к любому элементу Divi при загрузке страницы. Параллакс также является опцией Divi, которая позволяет добавлять уникальное движение к фоновым изображениям при прокрутке.
Сегодня мы собираемся использовать встроенные настройки дизайна Divi, чтобы комбинировать анимацию и параллакс всевозможными творческими способами. Эта комбинация волшебным образом работает вместе, чтобы создать красивый макет анимированных изображений с параллаксом, которые выглядят потрясающе, когда вы прокручиваете страницу вниз.
Давайте начнем!
Sneak Peek
Скачайте макет БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Что вам нужно для начала
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Изображения, которые будут использоваться для имитационного содержания. Вы можете найти изображения, используемые для этого урока, в пакете макетов Divi Life Coach.
После этого у вас будет чистый холст, чтобы начать проектировать в Divi.
Основная мысль
Основная идея, лежащая в основе этой концепции дизайна, основана на использовании параллакса CSS на фоновых изображениях. Из-за того, как работает параллакс CSS, изображение параллакса останется фиксированным и автоматически заполнит окно браузера независимо от размера элемента, использующего его. Фиксированный характер изображения позволяет вам использовать одно и то же изображение параллакса для нескольких элементов в Divi, а затем перемещать эти элементы с помощью анимации. Когда анимация установится, используемые фоновые изображения параллакса будут совпадать и работать, как ожидалось, при прокрутке страницы вниз.
Часть 1: Создание дизайна Divi Animation и Parallax (версия 1)
Создайте новый раздел с строкой из двух столбцов (1/2 1/2).
Прежде чем мы добавим наши модули, давайте внесем несколько изменений в раздел и строку.
Обновить настройки раздела и строки
Сначала откройте настройки раздела и удалите отступы по умолчанию следующим образом:
Padding: 0px сверху, 0px снизу
Затем откройте настройки строки и задайте для строки фоновое изображение с параллаксом.
Фоновое изображение: [загрузить изображение]
Использовать эффект параллакса: ДА
Метод параллакса: CSS
Здесь метод параллакса должен быть установлен на CSS, чтобы дизайн работал.
Ширина: 100%
Максимальная ширина: 100%
Прокладка: 10vw сверху, 10vw слева, 10vw справа
Добавьте текстовый модуль с соответствующим фоном параллакса
Теперь мы готовы приступить к добавлению наших текстовых модулей в дизайн. Первый текстовый модуль - ключ к этому дизайну. Применяя точно такое же фоновое изображение и параллакс css к текстовому модулю, мы можем проявить творческий подход к анимации для получения совершенно уникального эффекта.
Продолжайте и добавьте новый текстовый модуль в столбец 1.
Затем обновите настройки текстового модуля следующим образом:
Содержание тела:
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Затем дайте текстовому модулю то же фоновое изображение css parallax, которое вы добавили в строку.
Фоновое изображение: [загрузить изображение]
Использовать эффект параллакса: ДА
Метод параллакса: CSS
Шрифт текста: Fira Sans
Толщина шрифта текста: легкий
Цвет текста текста: #ffffff
Размер текста текста: 70 пикселей
Высота текстовой строки: 1em
Стиль шрифта ссылки: подчеркивание (U)
Цвет текста ссылки: #ffffff (по умолчанию), # 881e67 (при наведении)
Размер текста ссылки: 30 пикселей
Расстояние между буквами ссылки: 2 пикселя
Заполнение: 20% сверху, 20% снизу, 10% слева, 10% справа
Ширина границы: 20 пикселей
Цвет границы: #ffffff
Затем добавляем следующую анимацию в текстовый модуль:
Стиль анимации: слайд
Направление анимации: вправо
Продолжительность анимации: 1500 мс
Интенсивность анимации: 80%
Начальная непрозрачность анимации: 20%
Давайте проверим эффект…
Обратите внимание, как фоновое изображение модуля анимированного текста останавливается на соответствующем месте фона строки. Это потому, что они оба используют одно и то же фоновое изображение с эффектом параллакса css.
Добавление второго текстового модуля с фоновым изображением True Parallax
На этом этапе мы готовы добавить наш следующий текстовый модуль. У следующего будет другое фоновое изображение с использованием эффекта истинного параллакса. Мы также добавим ему анимацию.
Добавьте новый текстовый модуль в столбец 2.
Затем обновите основной текст словом «мой блог».
Затем добавьте фоновое изображение с помощью метода истинного параллакса.
Фоновое изображение: [загрузить изображение]
Использовать эффект параллакса: ДА
Метод параллакса: истинный параллакс
Шрифт текста: Fira Mono
Стиль шрифта текста: TT
Текст Выравнивание текста: по центру
Цвет текста текста: #ffffff
Расстояние между буквами текста: 10 пикселей
Ширина: 320 пикселей
Максимальная ширина: 320 пикселей
Выравнивание модуля: по центру
Маржа: (рабочий стол): -5vw сверху, 4vw снизу
Маржа (планшет и телефон): 3vw top
Отступ: 70 пикселей сверху, 70 пикселей снизу.
Ширина границы: 20 пикселей
Цвет границы: #ffffff
Стиль анимации: слайд
Направление анимации: вниз
Задержка анимации: 200 мс
Создание третьего текстового модуля с новым фоновым изображением параллакса
Чтобы создать третий текстовый модуль, продублируйте только что созданный текстовый модуль в столбце 2.
Затем мы собираемся оставить фоновое изображение таким же, но мы собираемся обновить эффект параллакса с помощью метода параллакса CSS.
Ширина: 240 пикселей
Максимальная ширина: 240 пикселей
Выравнивание модуля: слева
Поля: низ 0 пикселей
Отступ: 170 пикселей сверху, 170 пикселей снизу, 95 пикселей слева, 95 пикселей справа
Настраиваемая ширина, а также правое и левое отступы используются для создания вертикального отображения текста, которое хорошо сочетается с дизайном более длинного модуля.
Затем обновите направление анимации вверх, а не вниз.
Направление анимации: ВВЕРХ
Конечный результат
Теперь посмотрим на окончательный результат.
Часть 2: Создание анимации и дизайна с параллаксом (версия 2)
В следующем дизайне будет добавлена уникальная анимация путем загрузки фонового изображения параллакса для строки после начальной анимации модулей. Для этого нам нужно будет использовать отдельную строку строго для фонового изображения параллакса CSS, которое будет перемещаться за содержимым. А так как фон нашего раздела будет открыт изначально, мы можем добавить настраиваемый цвет фона для нашего содержимого перед анимацией строки.
Вот как это сделать.
Сначала разверните режим каркасного просмотра. Затем продублируйте строку, содержащую ваши текстовые модули. Теперь у вас будет два одинаковых ряда. Затем удалите текстовые модули внутри верхнего ряда. Все, что мы действительно хотели сделать, это получить фору по дизайну нашего верхнего ряда.
Затем обновите настройки для верхней строки следующим образом:
Высота: 900 пикселей (рабочий стол), 2000 пикселей (планшет и телефон)
Padding: 0px сверху, 0px снизу
Стиль анимации: слайд
Направление анимации: вправо
Продолжительность анимации: 1250 мс
Задержка анимации: 1800 мс
Мы задаем строке заданную высоту, потому что пустая строка не будет иметь высоты по умолчанию. Поэтому вам нужно убедиться, что высота строки достаточна, чтобы покрыть содержимое вашей второй строки содержимым. Мы также дали строке анимацию с задержкой, чтобы она скользила за содержимым после появления текстовых модулей.
Перекрытие двух рядов
Теперь все, что нам нужно сделать, это поднять нижнюю строку вверх, используя отрицательное поле, чтобы она перекрывала верхнюю строку с нашей фоновой анимацией.
Откройте настройки для нижней строки и обновите поля следующим образом:
Поля: -900 пикселей сверху (рабочий стол), -2000 пикселей (планшет и телефон)
Затем удалите фоновое изображение с помощью метода параллакса css для строки, поскольку вместо этого мы будем использовать фоновое изображение верхней строки.
Вот пока дизайн. Обратите внимание на отложенную фоновую анимацию в первой строке и на то, как фон параллакса для текстового модуля в столбце 1 идеально соответствует ей.
Добавление цвета фона раздела
Чтобы придать текстовым модулям начальный цвет фона перед анимацией строки, вы можете задать цвет фона для раздела.
Откройте настройки раздела и добавьте следующее:
Цвет фона градиента слева: rgba (136,30,103,0.61)
Правый градиент фона: # 881e67
Тип градиента: радиальный
Конечный результат
Теперь посмотрим на окончательный результат.
Дополнительный комбинированный режим наложения и анимация
Вы также можете проявить еще больше творчества, добавив режим наложения ко второй строке и добавив анимацию масштабирования, которая будет работать в тандеме с анимацией модуля.
Режим наложения: Яркость
Стиль анимации: Zoom
Вот окончательный результат.
А вот как это выглядит на мобильном телефоне.
Последние мысли
Я надеюсь, что вы узнали кое-что в процессе, когда мы исследовали некоторые уникальные способы комбинировать анимацию и изображения с параллаксом. Результаты определенно уникальны, и я уверен, что вы можете легко настроить эту настройку, чтобы создать бесчисленное множество других комбинаций, которые будут потрясающе выглядеть в вашем следующем проекте.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!