Hover эффект. Сделайте сайты оживленными

Hover эффект. Сделайте сайты оживленными

Итак, вы готовы добавить свежего воздуха к дизайну своего веб-сайта? Cегодня мы хотим объявить о выпуске hover эффект (гибких опций наведения) для редактора Gridbox. Пришло время сделать небольшой перерыв в расширении функциональности приложения Store и сосредоточиться на улучшении основных функций редактора Gridbox. Хотите подробностей? Крутите вниз!

Gridbox: Hover эффект

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

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

 

Только представьте, как преобразятся ваши сайты. Собственно, знаете что? Не нужно воображать. Мы подготовили для вас несколько примеров! Просто взгляните на скриншоты ниже.

Изменение цвета фона наложения при наведении курсора

Hover эффект

Изменение фоновых изображений при наведении курсора

Hover эффекты

Изменение цвета фона при наведении курсора

Hover эффекты

Изменение отступов (маржинальность) при наведении курсора

Hover эффекты отступы

Изменение теней и полей при наведении курсора

Hover эффекты тени поля

Изменение отступов при наведении курсора

Hover эффекты отступы

Изменение радиуса границы при наведении курсора

Hover эффекты радиус границ

Настройка Hover эффектов

Вам, наверное, не терпится узнать, как настроить такие эффекты на своем сайте? Поговорим об этом подробнее. Вы найдете кнопку-переключатель «Настройки при наведении» рядом с параметрами на вкладках «Дизайн» и «Макет».

Hover эффекты настройка

Включив опцию Hover Settings, вам станут доступны следующие опции:


  • установка стилей для состояния элемента по умолчанию;
  • установка стилей при наведении курсора мыши;
  • настройки перехода.

 

Идея очень простая! Во-первых, вам нужно настроить стили элементов для состояния по умолчанию. Затем вы настраиваете стили, которые будут применяться при наведении курсора мыши.

Hover эффекты настройка радиусов

Настройки переходов

Параметры перехода позволяют установить плавную анимацию перехода от одного состояния элемента к другому.

Hover эффекты перехода

Вам доступны следующие настройки:

 

  • Продолжительность - позволяет установить продолжительность анимации;
  • Easing - определяет, как рассчитываются значения между началом и концом перехода. Вам доступны 24 предустановленных кривых плавности;
  • Advanced Easing Settings - позволяет установить собственную кривую Безье.

 

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

Hover эффекты перехода

Расширенные настройки теней

Не используйте тени в дизайне своего сайта? Пора это изменить. Потому что теперь, помимо значений цвета и расстояния, в вашем распоряжении более продвинутые настройки теней. Используя расширенные настройки тени, вы можете привлечь внимание к определенным элементам, чтобы выделить их. В дополнительных настройках вы можете настроить следующие значения:

 

  • Смещение по горизонтали - значение, при котором тень элемента смещается по горизонтали;
  • Вертикальное смещение - значение, при котором тень элемента смещается по вертикали;
  • Размытие - значение, при котором тень размывается, делая края тени более размытыми или более контрастными;
  • Разброс - значение, которое расширяет или сжимает тень во всех направлениях.
Hover эффекты тени

Тени сетки сделают ваш сайт более реалистичным и придадут вашим страницам уникальный и индивидуальный вид. Настройте и убедитесь сами!

Кнопка просмотра страницы

Мы знаем, что вам так не хватало все это время. Кнопка быстрого просмотра страницы, верно ?! Забудьте о привязке страницы к главному меню для просмотра. Теперь у вас есть простой и быстрый способ просматривать свою страницу во внешнем интерфейсе. Все, что вам нужно для просмотра отредактированной страницы, - это просто нажать кнопку «Просмотр страницы» на боковой панели навигации в редакторе Gridbox!

Hover эффекты просмотр страницы

Заключение

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

О, еще одно! Мы позаботились о скорости ваших сайтов. Так что можете быть уверены, стили CSS для эффектов наведения создаются только после их включения. Наслаждаться!

 

Рейтинг 5

Теги страницы

Это интересно