Как создать плавающие модули, которые сталкиваются в 3D-пространстве в Divi

Всегда интересно исследовать новые дизайны, которые возможны с помощью Divi. И сегодня мы будем использовать Divi для исследования трехмерного пространства! Технически мы будем изучать, как проектировать плавающие модули, которые выглядят так, как будто они сталкиваются в трехмерном пространстве. Этот дизайн будет хорошо работать как творческий способ удивить посетителей, показывая, что у вас есть «простор» услуг, продуктов или ресурсов на вашем веб-сайте.

Очевидно, что этот урок не будет сравниваться с тем, как я представляю себе исследование космоса в реальной жизни. Но, надеюсь, вы, исследователи Divi, можете кое-чему научиться на своем пути.

Sneak Peek

Вот краткий обзор дизайна, который мы создадим вместе.

Скачайте БЕСПЛАТНО плавающие модули, которые сталкиваются в 3D-пространстве

Чтобы получить доступ к дизайну, созданному в этом руководстве, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Подпишитесь на наш канал Youtube

Начало работы с готовым макетом

Для начала убедитесь, что у вас установлена ​​и активна тема Divi. Затем создайте новую страницу, дайте странице название и разверните Divi Builder (на передней панели). Выберите вариант «Выбрать готовый макет». Затем выберите макет целевой страницы видеоигры и импортируйте его на новую страницу.

Чтобы получить преимущество над нашим дизайном, мы будем использовать раздел под названием «Особенности игры», который содержит рекламные вставки, которые мы собираемся использовать для нашего дизайна. Так как это единственный раздел, который нам действительно нужен, удалите все разделы и строки, кроме двух строк объявлений.

Реализация плавающих пятен в дизайне трехмерного пространства в Divi

Создание первого ряда пятен

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

Теперь, используя функцию множественного выбора Divi (удерживайте ctrl / cmd при выборе каждого рекламного объявления), выберите 5 рекламных объявлений в двух столбцах ниже и перетащите их в новую строку с одним столбцом в верхней части раздела.

Теперь вы можете удалить две строки, которые поставлялись с готовым макетом ниже. После этого у вас должна быть только одна строка из одного столбца, содержащая 5 пятен.

Добавление перспективы в наш раздел

Чтобы получить 3D-эффект, который мы ищем в этом дизайне, нам нужно добавить свойство перспективы css в наш раздел. Это добавит трехмерную перспективу к нашей строке всякий раз, когда мы поворачиваем строку с помощью параметров преобразования.

Откройте настройки раздела и добавьте следующий настраиваемый CSS в основной элемент:

perspective: 1000px;

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

Для получения дополнительной информации узнайте, как перспектива работает с параметрами преобразования в Divi.

Настройка строки

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

1. Нам нужно выровнять наши размытия по горизонтали, используя «display: flex». Благодаря этому наш дизайн будет согласованным и отзывчивым на всех устройствах (в отличие от использования макета из 5 столбцов, который сломается на планшете и телефоне).
2. Нам нужно избавиться от полей столбцов по умолчанию, установив ширину желоба равной 1.
3. Нам нужно использовать transform rotate, чтобы повернуть строку на 45 градусов по оси X. Когда свойство перспективы добавлено к родительскому элементу (разделу), строка и все ее элементы имеют желаемый трехмерный эффект.

Откройте настройки строки и обновите следующее:

Ширина желоба: 1
Ширина: 80% (рабочий стол), 100% (планшет), 100% (телефон)
Преобразование, поворот оси X: 45 градусов

CSS: основной элемент столбца:

display: flex;
justify-content: center;

Регулировка стиля и интервала размытия

Пришло время немного скорректировать содержание и стиль наших аннотаций.

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

Сначала удалите содержимое тела.

Затем добавьте цвет фона:

Цвет фона: rgba (20,241,217,0.16)

Затем обновите следующий интервал:

Настраиваемая маржа (рабочий стол): 2vw справа
Пользовательская маржа (планшет и телефон): 0vw справа

Пользовательские отступы: 2% сверху, 2% снизу, 3% слева, 3% справа

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

Ширина границы: 2 пикселя
Цвет границы: rgba (20,241,217,0,66)

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

Создание второго ряда объявлений

Чтобы создать второй ряд размытых изображений, просто продублируйте только что настроенный ряд из 5 размытых изображений.

Чтобы создать эффект столкновения, мы можем повернуть дублированный ряд в противоположном направлении (-45deg).

Откройте дублированную строку и обновите следующее:

Преобразование, поворот оси X: -45 градусов

Увеличить заполнение верхней и нижней части

На этом этапе передние пятна могут выходить за пределы раздела. Чтобы исправить это, добавьте в раздел следующие отступы:

Пользовательские отступы: 15% сверху, 15% снизу

Использование параметров преобразования для индивидуального изменения размера и положения каждого размытия

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

Чтобы упростить задачу, я собираюсь пронумеровать рекламные объявления от 1 до 10, начиная с крайнего левого объявления в верхнем ряду (Вставка № 1) и заканчивая крайним правым рекламным сообщением во втором ряду (Вставка № 10).

Объявление №1

Начнем с нашей первой аннотации в верхнем ряду. Откройте настройки рекламного сообщения и обновите следующее:

Масштаб преобразования (оси x и y): 90%

Вставка № 2

Откройте настройки Blurb # 2 и обновите следующее:

Масштаб преобразования (оси x и y): 80%
Преобразовать преобразовать ось X: -10%

Вставка № 3

Масштаб преобразования (оси x и y): 80%
Преобразовать преобразовать ось X: 20%

Вставка № 4

Масштаб преобразования (оси x и y): 85%
Преобразовать преобразовать ось X: -30%

Вставка № 5

Масштаб преобразования (оси x и y): 60%

После этого ваша первая строка должна выглядеть примерно так.

Продолжайте настраивать параметры преобразования для пятен 6-10, начиная с рекламного сообщения №6 в крайнем левом углу второго ряда.

Вставка № 6

Масштаб преобразования (оси x и y): 60%
Преобразовать преобразовать ось X: -40%
Преобразовать преобразовать ось Y: -20%

Вставка № 7

Масштаб преобразования (оси x и y): 90%
Преобразовать преобразовать ось X: 20%

Вставка № 8

Масштаб преобразования (оси x и y): 70%
Преобразовать преобразовать ось X: -50%

Вставка № 9

Масштаб преобразования (оси x и y): 80%
Преобразовать преобразовать ось X: -20%

Вставка № 10

Масштаб преобразования (оси x и y): 70%
Преобразовать преобразовать ось X: -60%

Теперь давайте посмотрим, как выглядит вторая строка, когда она сталкивается с нашей первой строкой в ​​трехмерном пространстве.

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

Окончательный дизайн

Теперь давайте посмотрим на окончательный дизайн наших трехмерных плавающих модулей.

Рабочий стол

Планшет

Телефон

Из-за того, что 5 размытых изображений тянутся через строку, немного сложнее уместить все 5 размытых изображений, не выходя за пределы области просмотра. Чтобы исправить это, вы можете просто скрыть дальнейшее объявление в каждой строке на телефоне. Или вы можете уменьшить размер каждого из своих объявлений на телефоне.

Последние мысли

Я надеюсь, что этот урок послужит вам источником вдохновения для создания собственных плавающих модулей в 3D пространстве. Все, что действительно требуется, - это несколько шагов, чтобы повернуть весь ряд модулей в 3D с использованием параметров перспективы и преобразования. После этого вы можете расположить каждый из модулей, чтобы перемещать их в любом месте.

Удачи, исследуя.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!