Как создать эффект прокрутки расширяющихся слоев для привлечения иллюстраций приложений в Divi

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

Давайте сразу приступим к делу.

Sneak Peek

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Создание эффекта прокрутки расширяющихся слоев для привлекательной иллюстрации приложения в Divi

Добавить ряд

Начнем с добавления строки из 2 столбцов (половина-половина).

Добавить временную маржу к разделу

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

• маржа: 80vh сверху, 80vh снизу

Добавить 3 изображения как слои

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

Начнем с первого изображения.

Создать изображение 1

Добавьте модуль изображения в левый столбец.

Затем загрузите первое изображение в модуль. Не забудьте убедиться, что все три изображения будут иметь одинаковые размеры. Это 500 пикселей на 1050 пикселей.

Настройки изображения 1

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

Ширина и поля

• Ширина: 300 пикселей (компьютер и планшет), 150 пикселей (телефон)
• Выравнивание модуля: слева
• Поля: низ 0 пикселей

Граница

• Закругленные углы: 40 пикселей
• Ширина границы: 15 пикселей
• Цвет границы: #ffffff

Коробка Тень

• Box Shadow: см. Снимок экрана
• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 48 пикселей
• Цвет тени: rgba (0,0,0,0.2)

Создать изображение 2

Чтобы создать изображение 2, продублируйте изображение 1.

Затем обновите модуль дублирования изображения, добавив новое изображение того же размера (500 на 1050 пикселей).

Настройки изображения 2

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

Граница

• Ширина границы: 0 пикселей

Нам не нужна граница для этого изображения, но нам нужно заменить border-spacing на padding, чтобы изображения складывались без проблем.

Обивка

• Отступ: 15 пикселей сверху, 15 пикселей снизу, 15 пикселей слева, 15 пикселей справа

Позиция

Затем обновите положение изображения 2 на Абсолютное. Это сделает изображение полностью перекрывающим изображение 1.

• Позиция: Абсолютная

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

Эффекты прокрутки

Теперь пришло время добавить эффект прокрутки, который перемещает наш слой (изображение 2) при прокрутке страницы вниз.

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

На вкладке " Вертикальное движение" …

• Включить вертикальное движение: ДА
• Начальное смещение: 0 (при 0% области просмотра)
• Среднее смещение: 0 (при 0% области просмотра)
• Конечное смещение: -1 (при 100% области просмотра)

На вкладке " Горизонтальное движение" …

• Включить горизонтальное движение: ДА
• Начальное смещение: 0 (при 0% области просмотра)
• Среднее смещение: 1 (при 50% области просмотра)
• Конечное смещение: -1,5 (при 100% области просмотра)

На вкладке « Появление и исчезновение »…

• Включить постепенное появление и исчезновение: ДА
• Начальная непрозрачность: 0% (при 0% области просмотра)
• Средняя непрозрачность: 100% (при 10-15% области просмотра)
• Конечная непрозрачность: 70% (при 30% области просмотра)

Создать изображение 3

После того, как все эффекты прокрутки были добавлены к изображению 2, мы готовы создать изображение 3.

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

Теперь откройте настройки дубликата изображения (изображение 3) и загрузите новое изображение. Убедитесь, что у него те же размеры (500 на 1050 пикселей).

Эффекты прокрутки изображения 3

На вкладке «Дополнительно» обновите параметры эффектов прокрутки для изображения 3.

На вкладке « Вертикальное движение » обновите смещение вертикального движения следующим образом:

• Конечное смещение: -2 (при 100% области просмотра)

На вкладке « Движение по горизонтали » обновите «Движение по горизонтали» следующим образом:

• Среднее смещение: 2 (при 50% области просмотра)
• Конечное смещение: 3 (при 100% области просмотра)

На вкладке Fading In and Out обновите настройки Fading In и Out следующим образом:

• Начальная непрозрачность: 5% (при 0% области просмотра)
• Средняя непрозрачность: 100% (при 30-40% области просмотра)
• Конечная непрозрачность: 100% (при 50% области просмотра)

Результат

Проверьте результат на данный момент.

Добавить наклон преобразования к столбцу 1

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

Откройте настройки для столбца 1 и добавьте наклон преобразования следующим образом:

Наклон преобразования (ось X и Y): 8 градусов

Это создаст красивый трехмерный эффект на расширяющихся слоях.

Вот и все!

Необязательно: добавьте CTA в столбец 2

Теперь мы можем добавить любой заголовок и кнопку (или любой CTA) в правый столбец с некоторыми дополнительными эффектами прокрутки. Ознакомьтесь с бесплатной загрузкой этого макета выше, чтобы получить тот же призыв к действию, что и на этой иллюстрации.

Конечный результат

Вот окончательный результат.

А вот как он складывается на планшете и телефоне.

Использование изображений из пакета макетов Divi

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

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

Через несколько минут у нас будет совершенно другой дизайн!

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

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

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

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