Как переключить фоновое изображение с анимированным Gif при наведении курсора
Опубликовано: 2019-06-14Переключение фонового изображения на анимированный GIF при наведении курсора может быть отличным способом оживить ваш контент, а также предоставить отличную иллюстрацию для продуктов или услуг. Например, если вы продвигаете функции определенного программного продукта, анимированный GIF может помочь проиллюстрировать аспекты функциональности продуктов (мы делаем это для продуктов здесь, в Elegant Themes). Но вместо того, чтобы изначально показывать этот GIF, вы можете показать неподвижный снимок экрана этой функции, который заменяется анимированной версией (или GIF) при наведении курсора.
В этом уроке я покажу вам, как создать рекламное объявление, которое переключает фоновое (неподвижное) изображение с анимированным GIF при наведении курсора. Мы начнем с того, что рассмотрим, как создать снимок экрана и GIF с помощью Snagit (программное обеспечение для захвата экрана). Затем мы рассмотрим, как реализовать эти фоновые изображения в рекламном ролике, чтобы они включались при наведении курсора. Фактическое переключение изображений чрезвычайно просто с опциями фонового наведения Divi.
Такой дизайн поможет сохранить статичность дизайна и вовлечь пользователей всякий раз, когда они взаимодействуют с контентом.
Давайте начнем.
Sneak Peek
Загрузите GIF-фон на Hover Layout БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите json-файл на новую страницу с активным Divi Builder.
Давайте перейдем к руководству, ладно?
Что вам нужно для начала
Подпишитесь на наш канал Youtube
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Программное обеспечение для захвата экрана (или комбинация инструментов), которое позволит вам делать снимки экрана, записывать видео с экрана и создавать GIF-файлы. В этом руководстве я буду использовать Snagit в основном потому, что это универсальное решение, которое я использую каждый день для своих сообщений в блогах и руководств.
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
После этого у вас будет пустой холст, чтобы начать создавать несколько зависающих вкладок в Divi.
Часть 1: Создание снимков экрана и GIF-файлов
Для этого дизайна мы хотим создать снимок экрана, который будет отображаться как неподвижное фоновое изображение для модуля рекламного сообщения. Затем мы хотим создать GIF (анимированное изображение), которое оживит это неподвижное фоновое изображение с короткой иллюстрацией того, как работает продукт. Хитрость заключается в том, чтобы создавать изображения и GIF-файлы, которые выглядят достаточно похожими, чтобы иметь плавный переход при переключении одного изображения на другое при наведении курсора.
После создания двух изображений мы можем использовать неподвижное изображение в качестве исходного фонового изображения. Затем мы можем переключить фоновое изображение на изображение в формате gif при наведении курсора на модуль blurb.
Для создания скриншотов и гифок я буду использовать Snagit. Хотя это не бесплатное программное обеспечение, оно действительно простое в использовании и позволяет создавать снимки экрана, записывать экран и скрывать записи экрана в формате GIF в одном месте.
Создание снимка экрана
Чтобы создать снимок экрана, откройте Snagit и откройте окно захвата. Затем обязательно выберите захват изображения, выбрав область экрана. Это позволит вам перетащить область на экране, чтобы сделать снимок. Чтобы начать захват экрана, нажмите кнопку захвата.
Затем щелкните и перетащите область захвата вокруг области экрана, которую вы хотите захватить как изображение.
Сохраните изображение на свой компьютер. Затем снова откройте окно Snagit Capture и выберите захват видео, выбрав область экрана. Чтобы начать захват экрана, нажмите кнопку захвата.
Затем щелкните и перетащите область захвата вокруг области экрана, которую вы хотите захватить и записать как видеоклип. Чтобы создать более плавный переход между неподвижным изображением и gif, вам нужно захватить для видео ту же область, что и для изображения (или как можно ближе).
Когда вы будете готовы, нажмите кнопку записи и проведите демонстрацию, которую хотите записать.
Когда вы закончите, нажмите «Стоп», чтобы остановить запись. Затем вы можете редактировать видеоклип в редакторе Snagit. Когда вы закончите редактирование, нажмите кнопку Gif рядом с видео, чтобы создать GIF из вашего видео.
Во всплывающем окне «Создать Gif» измените параметры вывода по мере необходимости. Обязательно включите зацикливание, чтобы ваш gif повторялся. Затем нажмите кнопку «Создать».
Создав гифку, сохраните ее на свой компьютер.
Теперь у вас есть неподвижное изображение и изображение в формате gif, готовые для добавления в ваш дизайн в Divi.
Часть 2: Создание рекламного объявления, которое меняет фоновое изображение на анимированное изображение Gif при наведении курсора
Если вы еще этого не сделали, создайте новую страницу и разверните Divi Builder для построения интерфейса. Затем создайте новый обычный раздел с строкой из двух столбцов.
В столбце 1 добавьте модуль аннотации.
Затем обновите настройки содержимого следующим образом:
Body: «Здесь идет основной текст»
Значок использования: ДА
Значок: облако (см. Снимок экрана)
Добавить фоновое изображение по умолчанию
Затем добавьте к аннотации фоновое изображение по умолчанию следующим образом:
Фоновое изображение: загрузите созданное фоновое изображение (снимок экрана).
Размер фонового изображения: По размеру (это обеспечит видимость всего изображения)
Положение фонового изображения: вверху по центру (при этом изображение останется вверху рекламного объявления)
Добавить фоновое изображение Gif при наведении курсора
После того, как у вас есть исходное фоновое изображение, разверните опцию фонового наведения и выберите вкладку наведения. Затем добавьте изображение Gif, которое будет служить новым фоновым изображением при наведении курсора.
Стилизация модуля Blurb
Продолжайте стилизовать модуль аннотации, обновив следующие настройки дизайна:
Цвет значка: # 6bb962
Значок круга: ДА
Цвет круга: #ffffff
Выравнивание текста: по центру
Шрифт заголовка: Lora
Размер текста заголовка: 34 пикселей
Заполнение: 50% сверху, 5% снизу, 3% слева, 3% справа.
Настоящий ключ к этому дизайну - это набивка. Чтобы фон размещался над содержимым рекламного объявления, вам нужно добавить около 50% верхнего отступа. А так как размер фонового изображения установлен на «соответствовать», а положение установлено на «верхний центр», оно будет хорошо сидеть над содержимым, реагируя на ширину браузера.
Наконец, при наведении курсора придайте рекламному объявлению тень прямоугольника следующим образом:
Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Сила размытия тени коробки: 0 пикселей (по умолчанию), 24 пикселей (при наведении)
Конечный результат
Вот окончательный результат.
А вот и дизайн на планшете и телефоне.
А вот как это может выглядеть с дополнительными вставками с разными скриншотами и цветами.
Последние мысли
Если вы не знакомы с использованием GIF-файлов на своем веб-сайте, вам определенно стоит подумать об этом. Они действительно могут оживить ваш контент и предоставить чрезвычайно полезные иллюстрации для ваших посетителей. А с опциями фонового наведения Divi вы можете легко переключать неподвижное изображение с GIF при наведении. Это решение может обеспечить менее отвлекающий дизайн, который действительно привлекает пользователя при взаимодействии с вашим контентом. Надеюсь, вы сочтете это полезным для вашего следующего проекта.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!