Как объединить эффекты наведения с фонами CSS Parallax в Divi
Опубликовано: 2019-08-30Использование CSS Parallax с фоновыми изображениями в Divi позволяет нам создавать удивительно уникальные эффекты наведения. Параллакс - это один из многих способов оживить наши веб-сайты. А комбинируя параллакс с огромным набором опций наведения Divi, мы еще больше оживляем контент.
В этом уроке мы покажем, как вы можете быстро и легко создать уникальные эффекты наведения фона параллакса CSS в Divi. Никаких плагинов или пользовательского кодирования не требуется!
Давайте начнем.
Sneak Peek
Вот краткий обзор эффектов наведения фона параллакса css, которые мы создадим в этом уроке.
Скачайте макет БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Что вам нужно для начала
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Изображения, которые будут использоваться для фиктивного содержания
После этого у вас будет чистый холст, чтобы начать проектировать в Divi.
Часть 1: Создание эффекта наведения при параллаксе прорыва в Divi
Сначала создайте обычный раздел с строкой в один столбец. 
Перед добавлением модуля откройте настройки раздела и добавьте фоновое изображение с помощью CSS-параллакса.
Убедитесь, что изображение имеет ширину не менее 1920 пикселей. Дизайн хорошо сочетается с более темным фоновым изображением с большим количеством текстур. Я использую один из нашего пакета макетов кофейни, который доступен в Divi Builder.
Затем добавьте в раздел отступы следующим образом:
Набивка: 10vw сверху, 10vw снизу
Добавить модуль Blurb
После того, как фон раздела и отступы будут на месте, добавьте в строку модуль рекламного сообщения.
Затем обновите содержание рекламного объявления несколькими предложениями основного текста. Здесь вы можете оставить заголовок по умолчанию.
Затем нажмите, чтобы использовать значок, и выберите значок кофе для рекламного объявления.
После того, как контент будет готов, обновите настройки дизайна следующим образом:
Цвет значка: #ffffff
Размер шрифта значка: 50 пикселей
Выравнивание текста: по центру
Шрифт заголовка: Oswald
Стиль шрифта заголовка TT
Цвет текста заголовка: #ffffff
Интервал между заглавными буквами: 2 пикселя
Шрифт тела: Nunito
Цвет основного текста: #ffffff
Интервал между буквами основного текста: 1 пиксель
Отступ: 30 пикселей сверху, 30 пикселей снизу, 30 пикселей слева, 30 пикселей справа
Отрегулируйте ширину строки
После оформления рекламного объявления перейдите к настройкам строки и отрегулируйте максимальную ширину.
Максимальная ширина: 80%
Настройки столбца
В этом примере мы собираемся активировать эффект наведения на уровне столбца. Это позволяет вам использовать несколько модулей для создания контента, даже если мы пока используем только один модуль аннотации.
Чтобы этот эффект наведения параллакса работал, нам нужно добавить то же фоновое изображение в столбец, которое мы использовали в нашем разделе. Нам также нужно будет использовать тот же метод параллакса CSS для фонового изображения столбца.
Откройте настройки столбца и добавьте то же фоновое изображение, используя CSS-параллакс.
Вы не сможете увидеть никакой разницы между фоновым изображением столбца и фоновым изображением раздела, потому что они оба используют параллакс CSS, который по существу фиксирует изображение в одном и том же месте на веб-странице. Однако вы увидите разницу, как только появится эффект наведения.
Продолжайте обновлять настройки дизайна столбцов следующим образом:
Набивка: 4vw сверху, 4vw снизу
Закругленные углы: 10 пикселей
Затем придайте столбцу тень прямоугольника, которая будет отображаться только при наведении курсора, как показано ниже:
Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Сила размытия тени коробки: 36 пикселей
Цвет тени (по умолчанию): rgba (0,0,0,0)
Цвет тени (при наведении): rgba (0,0,0,0.72)
Теперь перейдем к параметрам преобразования и обновим следующие стили преобразования при наведении курсора:
Масштаб трансформации (при наведении): 105%
Это немного увеличит столбец (и его содержимое), чтобы создать эффект легкого выскакивания из фонового изображения.
Преобразовать преобразовать ось Y (при наведении): -2,5%
Это немного сдвигает столбец при наведении, чтобы создать небольшое асимметричное смещение.
Преобразовать начало координат: 100% 50% (внизу в центре)
Эффект масштабирования начинается с нижней центральной точки начала координат, что в сочетании со значением смещения напоминает тонкий эффект шарнира.
Вот эффект наведения css parallax.
Теперь откройте настройки строки и дважды продублируйте столбец, чтобы создать в общей сложности три столбца с одинаковыми эффектами рекламного объявления и наведения.
Конечный результат
Вот окончательный дизайн. Обратите внимание, как фоновые изображения параллакса по умолчанию скрываются при прокрутке страницы. Затем они появляются при наведении курсора на каждый столбец, когда они выскакивают. Вы также можете увидеть, что параллакс по-прежнему работает в столбце при прокрутке страницы вниз при наведении курсора на столбец. Это тонкий, но чрезвычайно уникальный эффект наведения.
Добавление поворота к эффекту наведения
Мы также можем добавить вращение к эффекту наведения css параллакса, который добавляет приятный штрих дизайну. Просто откройте настройки каждого столбца и обновите следующее:
Преобразование, поворот оси Z (при наведении): 5 градусов
Если вы хотите смешать это, вы можете повернуть средний столбец на -5 градусов.
Вот окончательный результат.
А вот тот же дизайн с более светлым фоновым изображением и более темным текстом.
Часть 2: Создание эффекта наведения параллакса увеличительного стекла в Divi
Дублируйте раздел из первого дизайна, затем откройте настройки раздела и замените фоновое изображение новым. Я использую один из нашего пакета макетов видеоигр, потому что он действительно подчеркивает эффект наведения параллакса увеличения.
Обновить настройки строки
Нам понадобится дополнительное место для этого дизайна, поэтому откройте настройки строки и обновите следующее:
Ширина желоба: 1
Ширина: 100%
Максимальная ширина: 98%
После этого перейдите на вкладку содержимого и удалите два столбца, чтобы остался только один.
Настройки столбца
Для этого дизайна нам нужно применить эффект наведения на уровне модуля, а не на уровне столбца, поэтому нам нужно сбросить стили по умолчанию для столбца. Для этого щелкните правой кнопкой мыши элемент столбца и выберите «Сбросить стили элементов».
Обновить модуль Blurb
После того, как настройки столбца будут восстановлены до стилей по умолчанию, откройте настройки модуля blurb и добавьте то же фоновое изображение css parallax, которое было добавлено в раздел.
Размеры
Чтобы создать круглый модуль, сначала нам нужно задать ему подходящую ширину и высоту следующим образом:
Ширина: 300 пикселей
Выравнивание модуля: по центру
Высота: 300 пикселей
Граница
Чтобы завершить круговой эффект, нам нужно обновить закругленные углы и придать им небольшую границу.
Закругленные углы: 50%
Ширина границы: 1 пикс.
Цвет границы: rgba (255,255,255,0,12)
Эффект наведения тени коробки
Затем при наведении курсора придайте рекламному объявлению тень прямоугольника следующим образом:
Box Shadow: см. Снимок экрана
Сила размытия тени коробки: 36 пикселей
Цвет тени (по умолчанию): rgba (0,0,0,0)
Цвет тени (при наведении): rgba (0,0,0,0.7)
Преобразование эффектов наведения
Как только ваша тень блока будет на месте, обновите параметры преобразования следующим образом:
Преобразовать исходную точку (по умолчанию): 50% 0% (в центре слева)
Это гарантирует, что рекламное объявление не будет выходить за пределы страницы после того, как оно будет размещено в крайнем левом ряду из трех столбцов.
Масштаб трансформации (при наведении): 130%
Это увеличит рекламное объявление и действительно увеличит фоновое изображение параллакса для крутого эффекта наведения.
Дублируйте столбец
После того, как рекламное объявление готово, мы можем продублировать столбец, чтобы создать три столбца, каждый с одним и тем же модулем рекламного объявления.
Откройте настройки строки и дважды продублируйте столбец, чтобы всего три столбца.
Обновить источник преобразования
Поскольку все наши модули рекламных объявлений имеют исходную точку преобразования, установленную в «левый центр», нам нужно настроить это для размытых изображений в центре и правом столбце, чтобы они масштабировались от соответствующего положения.
Откройте настройки модуля рекламного сообщения в столбце 2 и обновите следующее:
Преобразовать исходную точку: 50% 50% (центр в центре)
Затем откройте настройки модуля рекламного сообщения в столбце 3 и обновите следующее:
Преобразовать исходную точку: 50% 100% (в центре справа)
Конечный результат
Теперь посмотрим на окончательный результат. Обратите внимание, как эффект действительно увеличивает фоновое изображение параллакса css позади рекламного объявления. А когда вы прокручиваете вниз при наведении курсора на рекламное объявление, оно выглядит как эффект увеличительного стекла.
На самом деле, это настолько круто, что мы могли бы оставить его как стиль по умолчанию, а не просто в состоянии наведения.
Последние мысли
Я надеюсь, что примеры в этом посте немного наполнили ваш творческий потенциал, так что вы можете исследовать еще больше крутых дизайнов и эффектов наведения, которые можно комбинировать с css parallax. Процесс настройки действительно прост, но возможности кажутся безграничными.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!