Как добавить эффекты наведения курсора Кена Бернса к изображениям, модулям и строкам в Divi

Эффект Кена Бернса существует уже давно. Этот эффект прославил американский документалист Кен Бернс, поскольку он использовал комбинацию техник панорамирования и масштабирования, чтобы оживить изображения в своих фильмах. В веб-дизайне эффект Кена Бернса оказался популярным дизайнерским приемом, позволяющим оживить фоновые изображения.

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

С выпуском эффектов преобразования для Divi Builder еще никогда не было так просто добавить эффекты наведения курсора Кена Бернса на ваши изображения. Эти параметры преобразования позволяют масштабировать (масштабировать), перемещать (или панорамировать) и вращать изображение по своему усмотрению. А поскольку вы можете применить эти преобразования к состоянию наведения изображения, возможности дизайна практически безграничны.

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

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

Sneak Peek

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

Объяснение основной концепции

Основная концепция создания эффекта наведения Кена Бернса включает использование новых параметров преобразования Divi для масштабирования, положения и поворота изображения при наведении курсора на это изображение. Вы можете увеличить свойство масштабного преобразования на определенный процент, чтобы изображение увеличивалось при наведении курсора. Вы можете использовать свойство преобразования translate для перемещения изображения по осям x и y. И вы можете повернуть изображение, используя свойство преобразования поворота, установив определенное значение в градусе (в данном случае значение в градусе для поворота по оси x). Наконец, вы можете контролировать продолжительность перехода (скорость) и кривую скорости, чтобы контролировать скорость потока эффекта наведения Кен Бернса. Три свойства преобразования и свойства перехода работают вместе, чтобы создать эффект наведения курсора, который оживит ваши фотографии.

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

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

Загрузите БЕСПЛАТНО Примеры эффектов наведения Кена Бернса

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

После того, как вы загрузили zip-файл, распакуйте папку. Затем импортируйте макет .json с помощью функции переносимости Divi Builder. Или вы можете просто перетащить файл в Divi Builder, используя функцию перетаскивания Divi. Вот и все!

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

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

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

СКАЧАТЬ

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

Начало работы с новой страницей

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

Добавление эффекта Кена Бернса к изображению в строке из одного столбца

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

Сначала создайте новый раздел со строкой из одного столбца. Затем добавьте в строку модуль изображения.

Скрытие переполнения столбца

Прежде чем мы начнем обновлять настройки изображения, откройте настройки строки и щелкните вкладку «Дополнительно». Затем добавьте следующий настраиваемый CSS в основной элемент столбца:

overflow: hidden;

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

Сохраните настройки строки.

Добавление вашего изображения

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

Убедитесь, что изображение значительно больше столбца. Это важно, чтобы изображение не выглядело размытым, когда вы масштабируете изображение до большего размера при наведении курсора. Если вы используете настройки по умолчанию для строки из одного столбца, максимальная ширина столбца будет 1080 пикселей. Итак, я использую изображение примерно 1500 пикселей в ширину и 900 пикселей в высоту.

Важно: как правило, чем больше изображение, тем больше места у вас будет для масштабирования, перемещения и поворота изображения без потери качества.

Добавление эффектов наведения при трансформации

Теперь, когда у нас есть изображение, пришло время использовать эти параметры преобразования для создания эффекта наведения Кена Бернса. Перейдите на вкладку дизайна, чтобы открыть параметры преобразования. Активируйте эффекты наведения и выберите вкладку наведения. Теперь любые настройки эффекта преобразования будут применяться только к состоянию наведения курсора на модуль изображения. Затем на вкладке Transform Scale обновите следующее:

Масштаб трансформации по оси X (при наведении): 136%
Масштаб трансформации по оси Y (при наведении): 136%

Затем щелкните вкладку Transform Translate и обновите следующее:

Преобразовать преобразовать ось x (при наведении): 3%
Преобразовать преобразовать ось Y (при наведении): 9%

Это перемещает изображение влево на 3% и вниз на 9%. Для этого конкретного изображения я собирался создать эффект, который увеличил бы масштаб и поместил пару в центр окна просмотра столбца.

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

Затем щелкните вкладку Transform Rotate и обновите следующее:

Преобразовать Повернуть ось X (при наведении): 6 градусов

Обновить параметры перехода

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

Продолжительность перехода: 2000 мс (или 2 секунды)
Кривая скорости перехода: линейная (это гарантирует, что скорость перехода не меняется по продолжительности)

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

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

Добавление эффекта наведения Кена Бернса к нескольким изображениям в строке из трех столбцов

Если вы хотите добавить эффект наведения курсора на изображения в нескольких столбцах, применяется тот же процесс. Главное, что вам нужно сделать, это убедиться и добавить фрагмент css «overflow: hidden» в каждый столбец, содержащий ваше изображение.

Используя наш предыдущий пример выше, измените структуру столбцов строки на макет из трех столбцов.

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

Столбец 1 Основной элемент CSS:

overflow:hidden;

Столбец 2, основной элемент CSS:

overflow:hidden;

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

overflow:hidden;

Затем скопируйте модуль изображения и вставьте его в столбец 2 и столбец 3.

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

Поскольку этот дизайн более типичен для макета сетки галереи, вы, вероятно, захотите немного увеличить продолжительность перехода, чтобы сделать анимацию наведения более резкой. Вы можете легко сделать это, используя функцию множественного выбора Divi. Удерживая ctrl или cmd, выберите все модули изображения. Затем щелкните значок шестеренки настроек на одном из изображений, чтобы открыть модальное окно «Параметры элемента».

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

Продолжительность перехода: 500 мс

Вот действующая новая длительность перехода.

Добавление эффекта наведения Кена Бернса к любому модулю с фоновым изображением

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

Вот как добавить эффект Кена Бернса в текстовый модуль.

Сначала создайте новый обычный раздел со строкой из одного столбца. Затем добавьте в строку текстовый модуль.

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

<h1>We're Engaged!</h1>

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

А затем обновите варианты оформления заголовка следующим образом:

Шрифт заголовка: Prata
Размер текста заголовка: 6vw
Пользовательские отступы: 10vw сверху, 10vw снизу, 3vw слева

Продолжительность перехода: 5000 мс

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

Масштаб преобразования по оси X (при наведении): 118%
Масштаб трансформации по оси Y (при наведении): 118%

Преобразовать преобразовать ось x (при наведении): 6%
Преобразовать преобразовать ось Y (при наведении): 6%

Теперь обновите настройки строки с помощью следующего настраиваемого CSS для столбца.

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

overflow:hidden;

А теперь посмотрите на результат.

Обратите внимание, как текст и фоновое изображение трансформируются вместе при наведении курсора.

Сочетание эффекта наведения Кена Бернса с дополнительными эффектами наведения

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

Сочетание эффекта наведения Кена Бернса с эффектами фильтра

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

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

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

Насыщенность (по умолчанию): 0%
Насыщенность (при наведении): 100%

Этот переход установит для текстового модуля значение насыщенности 0% по умолчанию, что приведет к удалению цвета, сделав его черно-белым. Установка значения 100% при наведении вернет исходный цвет изображения.

Вот заключительный эффект эффекта фильтра в сочетании с эффектом наведения Кена Бернса.

Сочетание эффекта наведения Кена Бернса с эффектами преобразования строки

В этом примере я собираюсь показать вам, как объединить эффект наведения курсора Кен Бернс с дополнительным эффектом трансформации, добавленным к строке. Идея состоит в том, чтобы использовать эффекты преобразования для масштабирования и поворота строки в состояние по умолчанию, а затем восстановить исходный дизайн при наведении курсора.

ПРИМЕЧАНИЕ. Этот метод действительно хорошо работает только для строки из одного столбца с одним модулем. Это связано с тем, что посетителю нужно будет одновременно навести указатель мыши на модуль и строку. Следовательно, модуль должен занимать всю высоту и ширину строки. Дополнительные модули или интервалы нарушат состояние зависания и вызовут проблемы.

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

Откройте настройки строки, содержащей текстовый модуль. Затем обновите следующее:

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу, 0 пикселей слева, 0 пикселей справа

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

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

Box Shadow: см. Снимок экрана
Сила размытия тени коробки: 36 пикселей
Цвет тени: rgba (0,0,0,0.17)

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

Масштаб трансформации по оси X (по умолчанию): 70%
Масштаб трансформации по оси X (при наведении): 100%
Масштаб трансформации по оси Y (по умолчанию): 70%
Масштаб трансформации по оси Y (при наведении): 100%

Преобразовать Повернуть ось Y (по умолчанию): 19 градусов
Преобразовать Повернуть ось Y (при наведении): 0 градусов
Преобразование Поворот оси Z (по умолчанию): 23 град.
Преобразование Поворот оси Z (при наведении): 0 градусов

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

Добавление эффекта наведения Кена Бернса ко всей строке содержимого

На всякий случай, если вам интересно, эффект наведения Кена Бернса также можно использовать для оживления целого ряда контента при наведении курсора. Это будет не очень практично для строк с большим количеством контента, потому что это будет сбивать с толку или отвлекать посетителей. Но для таких вещей, как заголовки, это может быть полезным методом проектирования. Хитрость заключается в том, чтобы добавить в раздел собственный фрагмент CSS «overflow: hidden». Затем вы можете добавить к строке эффекты трансформации.

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

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

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

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