Как создать разрыв изображения с помощью эффектов прокрутки Divi

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

Давайте начнем.

Sneak Peek

Вот взгляд на дизайн на сегодня.

Вы также можете увидеть оригинальную живую демонстрацию дизайна на демонстрационной странице под заголовком «Упражнения не должны быть скучными».

Загрузите макет Divi Layout для перехода между изображениями БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

Помимо настройки Divi, описанной выше, вам понадобятся:

• Два изображения (не менее 1080 на 540 пикселей)
• Программное обеспечение для редактирования фотографий, такое как Photoshop, для нарезки изображений перед добавлением их в Divi.

Часть 1. Нарезка изображений в Photoshop

Прежде чем мы сможем приступить к созданию нашего дизайна в Divi, нам нужно нарезать два наших изображения, которые будут использоваться для эффекта прокрутки отрывного перехода. Оба изображения необходимо обрезать так, чтобы они имели размер 1080 на 540 пикселей. После этого их нужно разрезать на 8 равных частей (4 поперек, 2 вниз). Когда все будет готово, мы можем сохранить их на свой компьютер и загрузить фрагменты изображений на наш сайт. Начнем с первого изображения.

Изображение # 1

Обрезка изображения

Первое, что нам нужно сделать, это обрезать изображение так, чтобы оно имело точные размеры 1080 на 540 пикселей. Для этого вы можете использовать любое программное обеспечение для редактирования изображений. В Photoshop вы можете использовать инструмент кадрирования.

Нарезка изображения

Затем нажмите, чтобы использовать инструмент среза, и выберите все изображение. Щелкните правой кнопкой мыши фрагмент / изображение и выберите параметр «Разделить фрагмент».

В поле параметра «Разделить фрагмент» обновите следующее:

Разделить по горизонтали на:

• 2 ломтика вниз, равномерно распределенные
• 270 пикселей на срез

Разделить по вертикали на:

• 4 кусочка в поперечнике, равномерно распределенные
• 270 пикселей на срез

Затем нажмите ОК.

Сохранение фрагментов изображения

Теперь у нас есть изображение, нарезанное на 8 равных блоков, каждый размером 270 на 270 пикселей.

Чтобы сохранить фрагменты изображения, перейдите в меню «Файл»> «Экспорт»> «Сохранить для Интернета».

Затем выберите формат файла и нажмите «Сохранить».

Во всплывающем окне обязательно обновите следующее:

• Сохранить как: [введите имя для изображений]
• Формат: только изображения
• Настройки: настройки по умолчанию
• Ломтики: все ломтики

Затем нажмите «Сохранить».

Теперь все ваши фрагменты изображений будут сохранены на компьютере и готовы к загрузке в Divi.

Изображение # 2

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

Повернуть фрагменты изображения

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

Чтобы повернуть изображение, вы можете использовать Photoshop или встроенное программное обеспечение для редактирования изображений из вашей операционной системы (вы даже можете использовать медиа-галерею WordPress для редактирования и поворота изображений после их загрузки на свой сайт).

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

Вот исходное изображение.

Вот как нужно повернуть фрагменты изображения перед загрузкой на свой сайт.

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

Теперь, когда оба изображения обрезаны, нарезаны, сохранены и повернуты, вы готовы добавить их на свой сайт Divi. У вас должно быть 16 изображений (8 с изображения 1 и 8 с изображения 2).

Часть 2: Создание эффекта прокрутки перехода между изображениями в Divi

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

Добавить строку №1

Для начала создайте ряд из четырех столбцов.

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

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

• Ширина желоба: 1
• Максимальная ширина: 1080 пикселей (рабочий стол), 540 пикселей (планшет и телефон)
• Padding: 0px сверху, 0px снизу
• Горизонтальный перелив: видимый
• Вертикальный перелив: видимый

Обновить заполнение раздела

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

• Padding: 0px сверху, 0px слева

Добавление изображений

В первую строку мы добавим каждое из 8 изображений / фрагментов, составляющих первое изображение. Изображения должны быть расположены внутри столбцов точно так, как они были нарезаны в фотошопе (4 по горизонтали и 2 по вертикали).

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

Изображение # 1

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

Затем загрузите первый фрагмент изображения в модуль.

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

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

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

Щелкните вкладку Масштаб и обновите следующее:

• Включить масштабирование вверх и вниз: ДА
• Начальный масштаб: 100% (при 20% области просмотра)
• Средний масштаб: 70% (при просмотре от 32% до 48%)
• Конечный масштаб: 100% (при 60% области просмотра)

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

• Включить вращение: ДА
• Начальное вращение: 0 градусов (при 0% области просмотра)
• Среднее вращение: 0 градусов (при 20% области просмотра)
• Конечный поворот: -90 градусов (при 60% области просмотра)

Эффект прокрутки будет выглядеть так при прокрутке страницы вниз.

Изображение # 2

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

Обновите модуль дублирования изображения с изображением №2.

Обновить эффект прокрутки

Мы собираемся сохранить большинство тех же эффектов прокрутки, перенесенных из изображения №1. Единственное, что нам нужно изменить, - это поворот. Перейдите на вкладку «Дополнительно» и измените конечное вращение на 90 градусов (вместо -90 градусов), чтобы оно вращалось в противоположном направлении.

• Конечное вращение: 90 градусов

Изображение # 3

Чтобы создать изображение №3, скопируйте и вставьте изображение №1 в столбец 3, а затем измените изображение на изображение №3.

Изображение # 4

Чтобы создать изображение №4, скопируйте и вставьте изображение №2 в столбец 4 и обновите изображение до изображения №4.

Изображение # 5

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

Обновите изображение до изображения №5. Затем обновите эффект прокрутки постепенного появления и исчезновения следующим образом:

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

Затем обновите эффект прокрутки Scaling Up и Down следующим образом:

• Начальный масштаб: 100% (при 0% области просмотра)
• Средний масштаб: 70% (при просмотре от 12% до 28%)
• Конечный масштаб: 100% (при 40% области просмотра)

И, наконец, обновите эффект вращающейся прокрутки следующим образом:

• Начальное вращение: 0 градусов (при 0% области просмотра)
• Среднее вращение: 0 градусов (при 0% области просмотра)
• Конечный поворот: 90 градусов (при 40% области просмотра)

Изображение # 6

Чтобы создать изображение №6, продублируйте изображение №5 и переместите его в столбец 2 (под изображением №2).

Обновите модуль изображения с изображением №5. Затем отрегулируйте эффект вращающейся прокрутки в противоположном направлении (-90 градусов) следующим образом:

• Конечное вращение: -90 градусов

Изображение # 7

Чтобы создать изображение № 7, продублируйте изображение № 5 и переместите его под изображение № 3 в столбце 3. Затем обновите модуль дублирования изображения с изображением № 7.

Изображение # 8

Чтобы создать изображение №8, продублируйте изображение №6 и переместите его под изображение №4 в столбце 4. Затем обновите модуль дублирования изображения с изображением №8.

Теперь все фрагменты изображения были добавлены в строку №1 с эффектом отрывной прокрутки.

Вот как выглядит результат на данный момент.

Добавить строку №2

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

Идите вперед и продублируйте строку №1.

Обновить изображения строки №2

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

Обновить эффекты прокрутки изображения

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

Сделайте это, разверните каркасный режим просмотра и используйте множественный выбор, чтобы выбрать все 8 изображений в строке №2. Затем откройте настройки для одного из выбранных образов, чтобы развернуть настройки элемента. В разделе Эффект прокрутки постепенного появления и исчезновения обновите следующее:

• Включить постепенное появление и исчезновение: НЕТ

Позиция, строка # 2

Наш последний шаг - разместить строку №2 непосредственно за строкой №1. Самый простой способ сделать это - указать строку и абсолютную позицию. Откройте настройки для строки №2 и обновите следующее:

• Позиция: Абсолютная
• Расположение: Top Center

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

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

Посмотрим на окончательный результат.

И вот он на мобильном телефоне.

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

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

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

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