Эффекты hover: CSS: Hover — эффекты при наведении
Как создать красивый hover-эффект | Блог Wix
В редакторе Wix предусмотрено очень много возможностей для создания красивых и необычных сайтов. Некоторые из них довольно очевидные, а про другие нужно специально узнавать. Мы, кстати, ведем этот блог в том числе и для того, чтобы рассказывать вам обо всяких таких штуках. Героем сегодняшнего поста станет интересная функция под названием hover-эффект, или, если подробнее, — эффект, возникающий в тот момент, когда посетитель сайта наводит курсор мышки на изображение.
Смысл hover-эффекта в том, что он превращает обычные сайты в интерактивные и «отзывчивые». Попадая на них, пользователь начинает с интересом наводить курсор на все подряд и смотреть, что происходит. В результате он проводит на сайте немало времени, что дает ему возможность разглядеть товары, и, возможно, подписаться на рассылку или совершить покупку.
Отличный пример использования hover-эффекта
Согласитесь, что hover-эффект на сайте дизайнера Наоми Кижнер более, чем уместен. Вам ведь наверняка захотелось навести курсор на каждую фотографию, чтобы она превратилась из черно-белой в цветную? Кстати, обратите внимание на дизайн и цветовое решение. Придумав использовать hover-эффект, Наоми выбрала неяркий серый фон и остановилась на очень простом шаблоне. И все правильно сделала!
Как это сделать в редакторе Wix
Пожалуй, пора переходить к практике. Зайдите в редактор Wix, нажмите кнопку «Добавить», выберите пункт «Кнопки и Меню», а затем — «Кнопка с Фото».
Кликнув два раза по появившейся в окошке редактора кнопке, вы активируете панель с ее настройками.
Теперь вам надо решить, как эта кнопка будет выглядеть, когда ее никто не трогает (Вид по умолчанию), и когда пользователь наводит на нее курсор (Вид при наведении). Нажав на кнопку «Заменить фото», вы сможете загрузить нужные вам изображения.
После этого кнопки на вашем сайте будут выглядеть вот так:
Не забывайте, что раз уж это кнопки, то при их нажатии должно что-то происходить. Люди любят кликать по картинкам со всякими эффектами, поэтому дайте им эту возможность и переведите их туда, куда вам нужно — на страничку с товарами, например.
Подсказка: для создания кнопки с hover-эффектом вам понадобятся два варианта одной и той же фотографии, допустим, цветная и черно-белая. Обработать снимки вы можете прямо в нашем
Как еще можно использовать hover-эффект
Теперь, когда вы узнали что это за эффект и как его сделать, попробуйте поэкспериментировать. Вот несколько интересных идей:
Попробуйте сделать так, чтобы при наведении курсора картинки двигались, поворачивались или наклонялись.
Как видите, вариантов немало, сделать такое под силу каждому, а результат понравится всем: и вам, и вашим пользователям.
#hoverэффект / #редакторWix / #советыповебдизайну / #Тренды
Какие плагины эффектов использовать на WordPress?
Зачем нужны плагины эффектов
Плагины WordPress — это маленькие программы, которые помогают сконфигурировать и оформить сайт перед размещением контента на нём. С их помощью можно решать многие задачи — от настройки поисковой оптимизации до добавления контактных форм и размещения интернет-магазина. Плагинами очень просто пользоваться благодаря интуитивно понятному интерфейсу.
С помощью плагинов вы можете добавить анимационные эффекты для WordPress, которые разнообразят ваш сайт. В статье мы расскажем о нескольких таких бесплатных плагинах.
Mouse cursor customizer
Плагин Mouse cursor customizer (настройщик курсора мышки) позволяет заменить стандартный курсор на любое изображение в форматах PNG, JPG и JPEG. Загрузите изображение, и пользователи вашего сайта будут видеть новый необычный курсор. На странице можно установить один вид курсора, а при наведении на ссылки или кнопки — другой. Также можно регулировать его размер.
Пример обновлённого курсора ниже. Заметьте, что при наведении на ссылку он меняется:
Weather Effect
С помощью плагина Weather effect (Погодные эффекты) можно добавить на страницы сайта разные «падающие» объекты. Это могут быть погодные явления разных времён года (например снежинки, звёздочки, солнышки, капли дождя, осенние листья) или объекты, приуроченные к праздникам (валентинки, шарики, рождественские подарки). Все объекты разбиты на группы по темам: Рождество, зима, осень, весна, лето, дождь, Хэллоуин, День благодарения, День святого Валентина, Новый год. Вы можете регулировать размер объектов, их количество и скорость падения на странице сайта.
Посмотрите, как может выглядеть на вашей странице плагин WordPress Эффект воды:
Easy Textillate
Плагин Easy Textillate предназначен для анимации текста на сайте. Он очень прост в использовании. Вы добавляете какой-либо текст в окно редактирования и выбираете нужные эффекты Вордпресс. В окне предпросмотра можно сразу увидеть, как будет выглядеть анимация на сайте. При этом автоматически создаётся шорткод. Вам остаётся только скопировать шорткод и добавить его на страницы, в записи или виджеты сайта (например календарь, облако меток, поиск).
Плагин имеет большое количество эффектов для начальной и конечной анимации — как текст появляется на странице и как он исчезает. Вы можете использовать дополнительные опции шорткода: выбрать шрифт для текста, его цвет и размер.
Как выглядит создание анимации для текста в редакторе:
Скопируем полученный шорткод и добавим его на страницу сайта в редакторе:
А вот как выглядит результат на сайте — теперь текст стал анимированным:
Image Hover Effects Ultimate
Плагин Image Hover Effects Ultimate нужен для добавления hover-эффекта — эффекта наведения. Это значит, что при наведении курсора на изображение или текст появляется анимация.
В бесплатной версии этого плагина есть 8 различных эффектов для настройки анимации при наведении. В настройках вы можете установить любое фоновое изображение или добавить текст, который будет появляться при наведении. После этого достаточно скопировать получившийся шорткод и добавить его в любую запись на сайте или на страницу.
Рассмотрим примеры. Один из эффектов плагина — General Effects:
Эффект Flipbox Effects:
Hover Effects — easily create any hover effect
Ещё один плагин Hover Effects с 39 интересными эффектами для WordPress. Можно добавить анимацию при наведении курсора как на изображение, так и на текст.
Использовать этот плагин очень просто. Нужно навести курсор на эффект в меню плагина, чтобы посмотреть, как будет выглядеть анимация:
Затем можно нажать на понравившийся эффект. Автоматически скопируется код. Когда вы будете редактировать запись или страницу, добавьте этот код в поле «Дополнительные классы CSS»:
Пример двух разных эффектов анимации текста и изображения на сайте:
Image Hover Effects Addon for Elementor
С помощью Image Hover Effects Addon for Elementor также можно добавлять эффекты при наведении курсора. Этот плагин можно использовать, если у вас есть плагин Elementor. Например, на хостинге для WordPress он уже установлен.
С плагином Image Hover Effects Addon for Elementor можно настроить эффект анимации — при наведении курсора на изображение будет появляться текст. Начните редактировать страницу через конструктор страниц Elementor. Затем перетащите виджет Image Hover Effects, выберите вид анимации, изображение и введите текст, который будет появляться при наведении:
Пример анимации на сайте:
Помогла ли вам статья? 14
раз уже
помогла
Hover-эффекты для круглых элементов с использованием CSS Transitions
В сегодняшнем уроке мы будем экспериментировать с hover-эффектами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!
Пожалуйста, обратите внимание: результат этого урока будет работать, как задумано, только в браузерах, которые поддерживают соответствующие свойства CSS.
В примерах кода в статье мы будем опускать префиксы браузеров, но вы, конечно, можете найти их в исходных файлах.
Итак, давайте начнем!
HTML
Для большинства примеров, мы будем использовать следующую структуру:
<ul>
<li>
<div>
<div>
<h4>Use what you have</h4>
<p>by Angela Duncan <a href=»http://drbl.in/eOPF»>View on Dribbble</a></p>
</div>
</div>
</li>
<li>
<div>
<div>
<h4>Common Causes of Stains</h4>
<p>by Antonio F. Mondragon <a href=»http://drbl.in/eKMi»>View on Dribbble</a></p>
</div>
</li>
<li>
<div>
<div>
<h4>Pink Lightning</h4>
<p>by Charlie Wagers <a href=»http://drbl.in/ekhp»>View on Dribbble</a></p>
</div>
</div>
</li>
</ul>
Хотя мы могли бы использовать изображения здесь, мы дадим себе немного больше свободы, и используем фоновые изображения вместо картинок. Мы определим их в классах, которые начинаются с «ch-img-«. Кроме того, у нас будут блоки с описанием отдельных элементов, и их названием.
Теперь, давайте создадим некоторые hover-эффекты!
CSS
Давайте определим общие стили для списка и элементов списка:
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: »;
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
Мы можем отцентрировать элемент списка, используя display: inline-block и определив свойство text-align.
Хак clearfix от Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/
Некоторые из примеров будут иметь немного другую структуру, но мы рассмотрим это в каждом конкретном примере более подробно.
Пример 1
В первом примере будем масштабировать описание, увеличивая его до размеров элемента, и мы также будем анимировать внутреннюю тень самого элемента. Итак, давайте определим положение элемента, тень для него и переход:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
}
Мы определим два класса для элемента: один — это ch-item, а другой будет использоваться для определения фонового изображения:
.ch-img-1 {
background-image: url(../images/1.jpg);
}
.ch-img-2 {
background-image: url(../images/2.jpg);
}
.ch-img-3 {
background-image: url(../images/3.jpg);
}
Описание элемента будет позиционироваться абсолютно, и мы зададим ему полупрозрачный фон, установив значение для RGBA. Его прозрачность будет равна 0, и мы будем уменьшать масштаб его также до 0:
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
Заголовок элемента будет иметь некоторые отступы и сглаженные тени для текста:
.ch-info h4 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
font-family: ‘Open Sans’, Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
Тег P имеет непрозрачность равную 0 и переход (мы хотим, чтобы он появлялся при наведении курсора мыши, но с задержкой):
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
Ссылка будет в верхнем регистре, и мы поменяем цвет при наведении на желтый:
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: ‘Open Sans’, Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
А теперь, самое интересное, что будет происходить при наведении мыши!
Этот элемент будет анимирован, и его тень изменит радиус с 16px до 1px:
.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
Описание будет плавно появляться и масштабироваться до 1:
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
Параграф будет просто появляться (с задержкой):
.ch-item:hover .ch-info p {
opacity: 1;
}
С первым примером мы закончили! Давайте взглянем на следующий.
Пример 2
HTML структура в данном случае такая же, как и в первом примере.
Здесь мы будем использовать тень для элемента, чтобы заполнить наш круг и чтобы тень служила фоном для описания.
Итак, здесь нет ничего особенного, только тень имеет несколько строк значений:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 0 rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
Изображения для фона:
.ch-img-1 {
background-image: url(../images/4.jpg);
}
.ch-img-2 {
background-image: url(../images/5.jpg);
}
.ch-img-3 {
background-image: url(../images/6.jpg);
}
Описание будет опять же спрятано:
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
backface-visibility: hidden;
}
Зададим стили для типографских элементов:
.ch-info h4 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: ‘Open Sans’, Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: ‘Open Sans’, Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
При наведении мы анимируем внутреннюю тень элемента (она будет у нас красноватая) до 110px в радиусе. Она покроет весь круг:
.ch-item:hover {
box-shadow:
inset 0 0 0 110px rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.8),
0 1px 2px rgba(0,0,0,0.1);
}
Мы увеличим описание, чтобы оно появилось:
.ch-item:hover .ch-info {
opacity: 1;
transform: scale(1);
}
Пример 3
В этом примере мы поиграем с вращением. Структура будет немного отличаться от первых двух примеров, поскольку мы должны добавить второй блок для эскиза. Таким образом, элемент будет выглядеть следующим образом:
<li>
<div>
<div>
<h4>Music poster</h4>
<p>by Jonathan Quintin <a href=»http://drbl.in/eGjw»>View on Dribbble</a></p>
</div>
<div></div>
</div>
</li>
Блок элемента будет иметь такие же стили, как и раньше (с тонкой тенью):
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
Для эскиза определим свойство transform-origin и переходы. Это будет элемент, который мы хотим, чтобы он поворачивался вниз при наведении курсора мыши, и при этом раскрывал описание элементов:
.ch-thumb {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
transform-origin: 95% 40%;
transition: all 0.3s ease-in-out;
}
С помощью псевдо-класса :after мы создадим небольшую медную защелку с радиальным градиентом:
.ch-thumb:after {
content: »;
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
Давайте определим фоновые изображения для каждого элемента:
.ch-img-1 {
background-image: url(../images/7.jpg);
z-index: 12;
}
.ch-img-2 {
background-image: url(../images/8.jpg);
z-index: 11;
}
.ch-img-3 {
background-image: url(../images/9.jpg);
z-index: 10;
}
Описание элемента будет иметь следующие стили:
.ch-info {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
background: #c9512e url(../images/noise.png);
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
Типографские элементы стилизованны следующим образом:
.ch-info h4 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 18px;
margin: 0 60px;
padding: 22px 0 0 0;
height: 85px;
font-family: ‘Open Sans’, Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
Ссылка будет в виде маленького кружка, который должен двигаться вправо при наведении:
.ch-info p a {
display: block;
color: #333;
width: 80px;
height: 80px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
color: #fff;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 24px;
margin: 7px auto 0;
font-family: ‘Open Sans’, Arial, sans-serif;
opacity: 0;
transition:
transform 0.3s ease-in-out 0.2s,
opacity 0.3s ease-in-out 0.2s,
background 0.2s linear 0s;
transform: translateX(60px) rotate(90deg);
}
.ch-info p a:hover {
background: rgba(255,255,255,0.5);
}
Так как мы хотим, чтобы движение и изменение прозрачности происходили с задержкой, но фон изменялся без неё, мы разделим переходы.
При наведении мы повернем эскиз и переместим/повернем ссылку:
.ch-item:hover .ch-thumb {
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
Пример 4
Четвертый пример будет включать в себя элементы 3D. Таким образом, нам нужно немного изменить структуру, чтобы иметь контейнер для перспективы и лицевую и обратную сторону. Таким образом, элемент списка будет выглядеть следующим образом:
<li>
<div>
<div>
<div>
<div></div>
<div>
<h4>Bears Type</h4>
<p>by Josh Schott <a href=»http://drbl.in/ewUW»>View on Dribbble</a></p>
</div>
</div>
</div>
</div>
</li>
Как вы можете видеть, мы добавили фоновое изображение для блока элемента, а также лицевой части переворачивающегося элемента.
Трюк заключается в том, чтобы задать такой же фон для ch-info-wrap, как и на остальной странице. Это создаст иллюзию, что наш элемент имеет отверстие.
Этот элемент будет иметь обычные стили:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
Дополнительный блок будет использоваться для перспективы, и мы добавим ему переход для тени:
.ch-info-wrap{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
perspective: 800px;
transition: all 0.4s ease-in-out;
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
Блок с классом ch-info будет иметь значение preserve-3d для transform-style, и мы зададим ему переход, так как этот элемент будет вращаться в 3D:
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
transition: all 0.4s ease-in-out;
transform-style: preserve-3d;
}
Лицевая и обратная стороны будут иметь следующие стили:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
backface-visibility: hidden;
}
Обратная сторона будет поворачиваться, так что мы не должны видеть ее изначально:
.ch-info .ch-info-back {
transform: rotate3d(0,1,0,180deg);
background: #000;
}
И снова, фоновые изображения:
.ch-img-1 {
background-image: url(../images/10.jpg);
}
.ch-img-2 {
background-image: url(../images/11.jpg);
}
.ch-img-3 {
background-image: url(../images/12.jpg);
}
… и типографские элементы:
.ch-info h4 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 90px;
font-family: ‘Open Sans’, Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: ‘Open Sans’, Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
При наведении, мы будем изменять тени враппера и поворачивать так, чтобы мы видели обратную сторону:
.ch-item:hover .ch-info-wrap {
box-shadow:
0 0 0 0 rgba(255,255,255,0.8),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-item:hover .ch-info {
transform: rotate3d(0,1,0,-180deg);
}
Пример 5
В этом примере мы хотим уменьшить внутреннюю часть эскиза до 0 и сделать, чтобы описание элементов появлялось и масштабировалось до 1.
Структура пятого примера будет такой же, как и в предыдущем примере.
Этот элемент имеет обычные стили:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
Враппер и блок с описанием будут иметь следующие общие стили:
.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
}
Давайте еще раз используем трюк, как и в прошлом примере, и установим такой же фон для враппера, что и для страницы:
.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
Общие стили для «переднего» и «заднего» блока:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
}
«Передний» будет иметь переход (он будет уменьшаться и исчезать):
.ch-info .ch-info-front {
transition: all 0.6s ease-in-out;
}
«Задний» блок, который содержит описание, будет иметь изначально прозрачность равную 0, а затем будет увеличиваться до 1.5:
.ch-info .ch-info-back {
opacity: 0;
background: #223e87;
pointer-events: none;
transform: scale(1.5);
transition: all 0.4s ease-in-out 0.2s;
}
Фоновые изображения и типографские элементы будут иметь такие же стили как и в предыдущих примерах, только с несколькими разными цветами:
.ch-img-1 {
background-image: url(../images/13.jpg);
}
.ch-img-2 {
background-image: url(../images/14.jpg);
}
.ch-img-3 {
background-image: url(../images/15.jpg);
}
.ch-info h4 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: ‘Open Sans’, Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: #e7615e;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: ‘Open Sans’, Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff;
}
При наведении мы уменьшим внутреннюю часть эскиза до 0 и установим непрозрачность равную 0 для «переднего» блока.
.ch-item:hover .ch-info-front {
transform: scale(0);
opacity: 0;
}
Та часть, которая содержит описание, будет изменена в размере и появится на экране.
.ch-item:hover .ch-info-back {
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
Пример 6
В этом примере мы хотим перевернуть внутреннюю часть миниатюры вниз, для того, чтобы показать описание. HTML-код будет таким же, как и в предыдущих двух примерах.
Элемент будет иметь такие же стили, как и раньше:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
Общие стили для враппера и элемента с описанием:
.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
transition: all 0.4s ease-in-out;
}
Оболочка будет иметь перспективу:
.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
perspective: 800px;
}
Элементу info установим следующие стили для трансформации:
.ch-info {
transform-style: preserve-3d;
}
Передняя и задняя стороны будут иметь переход. Обратите внимание, что на этот раз мы не будем устанавливать backface-visibility: hidden, так как мы хотим показать обратную сторону внутренней части эскиза, когда она переворачивается вниз:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
transition: all 0.6s ease-in-out;
}
Давайте установим правильный transform-origin, так чтобы мы могли открыть его вниз:
.ch-info .ch-info-front {
transform-origin: 50% 100%;
z-index: 100;
box-shadow:
inset 2px 1px 4px rgba(0,0,0,0.1);
}
Мы установим RGBA значение с непрозрачностью равную 0 для фона элемента с описанием:
.ch-info .ch-info-back {
background: rgba(230,132,107,0);
}
И обычные стили для других элементов:
.ch-img-1 {
background-image: url(../images/16.jpg);
}
.ch-img-2 {
background-image: url(../images/17.jpg);
}
.ch-img-3 {
background-image: url(../images/18.jpg);
}
.ch-info h4 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 25px;
padding: 40px 0 0 0;
height: 90px;
font-family: ‘Open Sans’, Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: ‘Open Sans’, Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
При наведении, мы будем вращать переднюю часть и немного анимировать тень.
.ch-item:hover .ch-info-front {
transform: rotate3d(1,0,0,-180deg);
box-shadow:
inset 0 0 5px rgba(255,255,255,0.2),
inset 0 0 3px rgba(0,0,0,0.3);
}
.ch-item:hover .ch-info-back {
background: rgba(230,132,107,0.6);
}
Пример 7
Последний пример будет в виде вращающегося куба, где мы открываем описание, поворачивая его на бок. Так как мы будем вращать каждую из граней, нам не нужна дополнительная оболочка. Итак, наш HTML-код будет выглядеть следующим образом:
<li>
<div>
<div>
<div></div>
<div>
<h4>Mouse</h4>
<p>by Alexander Shumihin <a href=»http://drbl.in/eAoj»>View on Dribbble</a></p>
</div>
</div>
</div>
</li>
Мы определим для элемента свойство perspective:
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
perspective: 900px;
}
Для элемента с классом ch-info понадобится preserve-3d:
.ch-info{
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
Лицевая и обратная сторона будут иметь переходы, transform-origin будет установлен как 50% 0%:
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
transition: all 0.4s linear;
transform-origin: 50% 0%;
}
Давайте создадим симпатичную тень для передней части:
.ch-info .ch-info-front {
box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}
Противоположная сторона будет спрятана изначально:
.ch-info .ch-info-back {
transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background: #000;
opacity: 0;
}
Зададим обычные стили для фоновых изображений и текстовых элементов:
.ch-img-1 {
background-image: url(../images/19.jpg);
}
.ch-img-2 {
background-image: url(../images/20.jpg);
}
.ch-img-3 {
background-image: url(../images/21.jpg);
}
.ch-info h4 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
margin: 0 15px;
padding: 60px 0 0 0;
height: 110px;
font-family: ‘Open Sans’, Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: ‘Open Sans’, Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255,242,34, 0.8);
}
Мы будем использовать translate3d, чтобы перемещать лицевую часть по оси Y нашего 3D пространства, и rotate3d, чтобы на самом деле повернуть её. Мы также постепенно её спрячем, чтобы какая-либо часть не была видна впоследствии:
.ch-item:hover .ch-info-front {
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;
}
Противоположная сторона будет поворачиваться «назад» до 0 градусов (первоначально она была повернута вниз):
.ch-item:hover .ch-info-back {
transform: rotate3d(1,0,0,0deg);
opacity: 1;
}
И вот и всё!
Надеюсь, вам понравилось, и эти эффекты будут вам полезны!
Демонстрация
Скачать исходные файлы
Перевод статьи с tympanus.net/codrops
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Учебник CSS 3. Статья «Переходные эффекты в CSS»
В этой статье учебника речь пойдет о переходных эффектах, мы с Вами узнаем, что из себя в CSS представляют переходные эффекты, с помощью них научимся создавать простую анимацию и сделаем наши страницы более интерактивными и динамичными.
Установка переходного эффекта
Прежде всего, давайте, разберемся, что из себя представляет переходный эффект. По большому счёту, переходный эффект представляет собой анимацию элемента (объекта), в которой элемент первоначально имеет один набор CSS свойств, а за определенный промежуток времени этот набор свойств изменяется.
Рис.161 Пример переходного эффекта в повседневной жизни.Например, у нас есть элемент, у которого задан стиль, определяющий цвет заднего фона — розовый. Мы хотим создать плавный эффект перехода цвета заднего фона в синий. Что в нашем случае для этого необходимо?
1. Понять какое свойство нам необходимо изменить, в нашем случае это свойство background-color со значением pink:
.myElement { background-color: pink; /* устанавливаем цвет заднего фона */ }
2. Определить каким будет конечный вид элемента, для нашего примера это элемент со свойством background-color, значение которого будет определять цвет синего цвета (например, в системе RGB — rgb(0,0,255)):
.myElement { background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона */ }
3. Какие у нас есть варианты, чтобы инициировать переход от одного цвета к другому? Как вариант мы можем воспользоваться псевдоклассом :hover, мы неоднократно рассматривали его в примерах этого учебника. Давайте создадим стили:
.myElement { background-color: pink; /* устанавливаем цвет заднего фона */ } .myElement:hover { background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ }
Не кажется ли Вам, что мы, как кальсоновые гномы пропустили какую-то очень важную вещь в переходе от одного цвета к другому? Именно! У нас нет переходного эффекта при изменении CSS стилей элемента, и изменение цвета происходит мгновенно.
Длительность переходного эффекта
Настало время познакомиться с первым из пяти CSS свойств, которые нам позволят создавать и управлять переходными эффектами в ваших документах. Свойство transition-duration определяет, сколько секунд или миллисекунд эффект перехода занимает времени.
Обращаю Ваше внимание, что переходные эффекты были введены в стандарте CSS 3 и поддерживаются всеми современными браузерами:
Мы с Вами уже неоднократно говорили про индексы производителей, если Вам необходима поддержка ранних версий браузеров на своем сайте, то не забывайте про их использование совместно со свойствами, отвечающими за переходные эффекты, которые мы рассмотрим ниже.
Давайте рассмотрим пример, в котором изменение цвета будет сопровождаться переходным эффектом при наведении на элемент. Длительность переходного эффекта задается в числовой форме в секундах (s) или миллисекундах (ms). Одна секунда соответствует тысяче миллисекунд.
Перейдем к примеру:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Длительность переходного эффекта при наведении</title> <style> div { display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */ width: 100px; /* ширина элемента */ height: 100px; /* высота элемента */ background-color: pink; /* устанавливаем цвет заднего фона */ margin-right: 25px; /* внешний отступ с правой стороны */ text-align: center; /* выравнивание текста по центру */ } .test1:hover { transition-duration: .5s; /* продолжительность переходного эффекта 0,5 секунд */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test2:hover { transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test3:hover { transition-duration: 1.5s; /* продолжительность переходного эффекта 1,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test4:hover { transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test5:hover { transition-duration: 2.5s; /* продолжительность переходного эффекта 2,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } </style> </head> <body> <div class = "test1">0.5s hover</div> <div class = "test2">1s hover</div> <div class = "test3">1.5s hover</div> <div class = "test4">2s hover</div> <div class = "test5">2.5s hover</div> </body> </html>
В этом примере с использованием CSS свойства transition-duration мы установили различную длительность переходного эффекта для элементов <div> при наведении.
Результат нашего примера:
Рис.162 Пример переходного эффекта при наведении (длительность переходного эффекта установлена только на псевдокласс).Возможно, вы обратили внимание на тот факт, что как только мы убираем с элемента указатель мыши, цвет элемента изменяется к первоначальному, как будто никакого эффекта перехода и не установлено.
Обратите внимание на те стили, которые мы использовали, мы действительно указали длительность эффекта перехода только при наведении на элемент, а в этом случае браузер возвращает первоначальный стиль мгновенно.
Давайте рассмотрим пример, в котором установим элементу отдельное значение свойства transition-duration равное 5 секундам:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Управление скоростью обратного переходного эффекта</title> <style> div { display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */ width: 100px; /* ширина элемента */ height: 100px; /* высота элемента */ background-color: pink; /* устанавливаем цвет заднего фона */ margin-right: 25px; /* внешний отступ с правой стороны */ text-align: center; /* выравнивание текста по центру */ transition-duration: 5s; /* продолжительность переходного эффекта 5 секунд */ } .test1:hover { transition-duration: .5s; /* продолжительность переходного эффекта 0,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test2:hover { transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test3:hover { transition-duration: 1.5s; /* продолжительность переходного эффекта 1,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test4:hover { transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } .test5:hover { transition-duration: 2.5s; /* продолжительность переходного эффекта 2,5 секунды */ background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */ } </style> </head> <body> <div class = "test1">0.5s hover<br>5s element</div> <div class = "test2">1s hover<br>5s element</div> <div class = "test3">1.5s hover<br>5s element</div> <div class = "test4">2s hover<br>5s element</div> <div class = "test5">2.5s hover<br>5s element</div> </body> </html>
В этом примере с использованием CSS свойства transition-duration мы установили различную длительность переходного эффекта для элементов <div> при наведении, и установили для самого элемента продолжительность переходного эффекта равного 5 секундам. Обратите внимание, что если переходный эффект не был закончен (указатель отведен раньше), то и обратный переходный эффект будет длиться пропорционально меньше.
Результат нашего примера:
Рис. 163 Управление скоростью обратного переходного эффекта.Хорошо, теперь мы с Вами научились задавать длительность перехода как при наведении на элемент, так и устанавливать длительность возвращения этой анимации (перехода) обратно. Во многих случаях нам достаточно того, чтобы значения эффекта перехода между двумя состояниями были равны. Для этого нам достаточно установить значение свойства transition-duration только на сам элемент, что значительно сократит CSS код, рассмотрим пример:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Управление скоростью переходного эффекта</title> <style> div { display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */ width: 100px; /* ширина элемента */ height: 100px; /* высота элемента */ background-color: pink; /* устанавливаем цвет заднего фона */ margin-right: 25px; /* внешний отступ с правой стороны */ text-align: center; /* выравнивание текста по центру */ transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */ } div:hover { background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона */ } </style> </head> <body> <div class = "test1">2s element</div> <div class = "test2">2s element</div> <div class = "test3">2s element</div> <div class = "test4">2s element</div> <div class = "test5">2s element</div> </body> </html>
В этом примере с использованием CSS свойства transition-duration мы установили одинаковую длительность переходного эффекта для элементов <div> как при наведении, так и при переходе к первоначальному состоянию.
Результат нашего примера:
Рис. 164 Управление скоростью переходного эффекта.Перед тем как мы перейдем к изучению дальнейшего материала, посвященному переходным эффектам, хочу обратить Ваше внимание на то, что далеко не все свойства CSS могут быть анимированы. Вы всегда можете подсмотреть анимируемо ли свойство в справочнике CSS на сайте.
Переходный эффект для отдельных свойств
И так, приступим к изучению особенностей следующего свойства — transition-property, оно указывает имя свойства CSS для которого используется переходный эффект. По умолчанию все свойства получают эффект перехода (значение по умолчанию all). Вы можете как полностью убрать все свойства, подлежащие переходному эффекту установив значение свойства none, так и указать конкретное свойство, или свойства, перечисленные через запятую.
Кроме того, допускается указать для каждого отдельного свойства свою продолжительность переходного эффекта. Давайте рассмотрим эту особенность на следующем примере:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Указание длительности перехода для разных свойств</title> <style> div { width: 200px; /* ширина элемента */ height: 200px; /* высота элемента */ font-size: 2em; /* размер шрифта */ font-weight: bold; /* жирное начертание символов */ text-align: center; /* выравниваем текст по центру */ line-height: 200px; /* высота строки (выравниваем по высоте)*/ margin: 0 auto; /* выравниваем блок по горизонтали (внешними отступами)*/ color: green; /* цвет текста */ background-color: yellow; /* устанавливаем цвет заднего фона */ border: 3px solid #000; /* сплошная граница 3 пикселя черного цвета */ transition-duration: 2s, 4s, 6s; /* продолжительность переходного эффекта (для каждого свойства своя) */ transition-property: background-color, border-color, color; /* свойства, которые подлежат переходному эффекту */ } div:hover { background-color: #000; /* устанавливаем цвет заднего фона при наведении*/ color: red; /* устанавливаем цвет текста при наведении*/ border-color: red; /* устанавливаем цвет границ элемента при наведении*/ } </style> </head> <body> <div>My element</div> </body> </html>
Обращаю Ваше внимание на то, что порядок указания свойств соответствует порядку показателей продолжительности переходного эффекта, перечисленных через запятую.
В этом примере с использованием CSS свойства transition-property мы установили свойства, которые подлежат переходному эффекту, а с использованием свойства transition-duration указали для них различную продолжительность.
Результат нашего примера:
Рис. 165 Указание длительности перехода для разных свойств.Задержка перед переходным эффектом
Следующее CSS свойство — transition-delay определяет, когда эффект перехода начнется (выступает в роли задержки начала эффекта). То есть это свойство задерживает время начала переходного эффекта.
Время задержки указывается числом в секундах (s) или миллисекундах (ms). Значение по умолчанию составляет 0 секунд (отсутствие времени задержки).
По аналогии с предыдущими свойствами допускается указывать более одного значения задержки перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение задержки соответствует значению (в том же порядке), которое определено в свойстве transition-property.
Здесь есть нюанс, если список задержек меньше, чем количество значений (свойств), определённых свойством transition-property, то значения задержек эффекта перехода для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше задержек, чем значений, указанных в свойстве transition-property, то список задержек усекается до количества значений этого свойства.
Рассмотрим пример:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Задержка переходного эффекта</title> <style> body, html { height: 100%; /* высота элементов */ margin: 0; /* убираем внешние отступы */ } div { width: 100px; /* ширина элемента */ height: 50px; /* высота элемента */ background-color: yellow; /* устанавливаем цвет заднего фона */ border: 1px solid #000; /* сплошная граница размером 1 пиксель черного цвета */ transition-duration: 500ms, 800ms; /* продолжительность переходного эффекта */ transition-property: width, height; /* свойства, которые подлежат переходному эффекту */ transition-delay: 500ms, 800ms; /* задержка для переходного эффекта (для каждого свойства своя) */ } div:hover { width: 50%; /* ширина элемента при наведении */ height: 50%; /* высота элемента при наведении */ } </style> </head> <body> <div>My element</div> </body> </html>
В этом примере с использованием CSS свойства transition-delay мы установили задержку для переходного эффекта (для свойства width — 500 миллисекунд, а для свойства height — 800 миллисекунд).
Результат нашего примера:
Рис. 166 Пример задержки переходного эффекта.Обращаю Ваше внимание, что для большинства задач достаточно установить задержку переходного эффекта для одного свойства, чтобы не испытывать нервную систему конечного пользователя.
С помощью задержки переходного эффекта Вы можете создавать интересные эффекты, давайте создадим выдвигающуюся боковую панель. В этом примере мы затрагиваем тему позиционирования, которую мы рассматривали в предыдущей статье учебника «Позиционирование элементов в CSS». Перейдем к примеру
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Выдвижная панель на CSS</title> <style> body, html { height: 100%; /* высота элементов */ margin: 0; /* убираем внешние отступы */ position: relative; /* относительное позиционирование */ } div { position: fixed; /* фиксированное позиционирование */ top: 30px; /* отступ от верхнего края */ right: -135px; /* отрицательный отступ от правого края (прячем элемент за экран) */ width: 200px; /* ширина элемента */ height: 50px; /* высота элемента */ line-height: 50px; /* высота строки */ background-color: yellow; /* устанавливаем цвет заднего фона */ border: 1px solid #000; /* сплошная граница размером 1 пиксель черного цвета */ transition-delay: 2s; /* задержка переходного эффекта 2 секунды */ } div:hover { transition-delay: 0s; /* отсутствие задержки при наведении на элемент */ right: 0; /* отступ от правого края равен нулю */ } </style> </head> <body> <div>Hover Me -----Thank you!-----</div> </body> </html>
В этом примере с использованием CSS свойства transition-delay мы установили задержку переходного эффекта при наведении (псевдокласс :hover) равную нулю, чтобы наша панель моментально выезжала, если бы мы этого не указали, то она бы получила задержку равную двум секундам, установленную для самого элемента. Благодаря этим действиям, пользователь быстро получает информацию при наведении, но даже если он уберет мышь с элемента наша выдвигающаяся панель будет полностью выдвинута еще в течении двух секунд.
Результат нашего примера:
Рис. 167 Пример задержки переходного эффекта.Изменение скорости переходного эффекта
CSS свойство transition-timing-function используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую «разгона», так что скорость перехода может меняться в течение длительности эффекта перехода.
Хочу обратить Ваше внимание, что за продолжительность переходного эффекта отвечает свойство transition-duration, а это свойство не меняет продолжительность, а лишь регулирует скорость в различные промежутки этого эффекта, например, 70% времени переходного эффекта собирайся как девушка, а 30% беги на работу как проспал, в результате чего продолжительность одна, а скорость эффекта при этом различается.
Допускается указывать более одного значения функций перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение функции соответствует значению (в том же порядке), которое определено в свойстве transition-property. Если список функций меньше, чем количество значений (свойств), определённых свойством transition-property, то значения функций для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше функций, чем значений, указанных в свойстве transition-property, то список функций усекается до количества значений этого свойства.
Свойство transition-timing-function имеет большое количество различных значений, которые определяют скорость переходного эффекта. Предлагаю Вам вкратце пробежать по ним и перейти к примерам, чтобы наглядно увидеть результат:
Значение | Описание |
---|---|
ease | Эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25,0.1,0.25,1). Это значение по умолчанию. |
linear | Определяет эффект перехода с одинаковой скоростью от начала до конца. Значение эквивалентно cubic-bezier(0,0,1,1). Точка 1 расположена на 0 по оси x и по оси y, точка 2 — на 1 по оси x и по оси y. |
ease-in | Определяет эффект перехода с медленного старта. Значение эквивалентно cubic-bezier(0.42,0,1,1). |
ease-out | Определяет эффект перехода с медленным окончанием. Значение эквивалентно cubic-bezier(0,0,0.58,1). |
ease-in-out | Определяет эффект перехода с медленного старта и медленным окончанием (симметричная кривая Безье). Значение эквивалентно cubic-bezier(0.42,0,0.58,1). Точка 1 расположена на 0,42 по оси x и на 0 по оси y, точка 2 — на 0,58 по оси x и на 1 по оси y. |
cubic-bezier(n,n,n,n) | Определяет пользовательские значения в кубической функции Безье. Она допускает 4 числовых значения от 0 до 1 ( Первые два значения — координаты x и y первой точки, а вторые два значения — координаты x и y второй точки). |
steps(int,start|end) | Указывает пошаговую функцию, с двумя параметрами. Первый параметр задает число интервалов в функции (целое положительное число (больше 0)). Второй параметр является необязательным и имеет значения «start» или «end» и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр опущен, то присваивается значение «end». Значение «start» осуществляет переход в начале каждого шага, а «end» в конце каждого шага. |
step-start | Значение эквивалентно steps(1, start). Свойство сразу принимает конечное значение. Значение свойства transition-duration (продолжительность перехода) игнорируется. |
step-end | Значение эквивалентно steps(1, end). Свойство принимает конечное значение в конце шага (т.е. если имеется свойство transition-duration (продолжительность перехода), то оно выступит в роли задержки перехода). |
Как правило, функция ease, при которой анимация начинается медленно, затем ускоряется и замедляется к концу (значение по умолчанию), или функция linear, которая определяет эффект перехода с одинаковой скоростью, подходит для большинства задач. Если Вам необходимо, что-то эдакое, то на этом ресурсе вы сможете подобрать оптимальные для Вашей фантазии значения функции.
Рассмотрим пример в котором сделаем выдвигающиеся панели для которых зададим различные математические функции, определяющие скорость переходного эффекта.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Скорость переходного эффекта в CSS</title> <style> div { width: 100px; /* ширина элементов */ height: 60px; /* высота элементов */ background: khaki; /* устанавливаем цвет заднего фона */ display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */ border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */ transition-duration: 1s; /* продолжительность переходного эффекта */} div:hover { height: 250px; /* высота элементов при наведении */ background: Moccasin; /* устанавливаем цвет заднего фона при наведении */ } .test {transition-timing-function: ease;} /* указываем значение функции перехода */ .test2 {transition-timing-function: linear;} /* указываем значение функции перехода */ .test3 {transition-timing-function: ease-in;} /* указываем значение функции перехода */ .test4 {transition-timing-function: ease-out;} /* указываем значение функции перехода */ .test5 {transition-timing-function: ease-in-out;} /* указываем значение функции перехода */ .test6 {transition-timing-function: cubic-bezier(0.5,0.05,0.7,0.5);} /* указываем значение функции перехода */ </style> </head> <body> <div class = "test">ease</div> <div class = "test2">linear</div> <div class = "test3">ease-in</div> <div class = "test4">ease-out</div> <div class = "test5">ease-in-out</div> <div class = "test6">cubic-bezier</div> </body> </html>
В этом примере с использованием CSS свойства transition-timing-function мы создали выдвигающиеся панели для которых задали различные математические функции, определяющие скорость переходного эффекта в различные промежутки времени.
Результат нашего примера:
Рис. 168 Скорость переходного эффекта в CSS.Давайте рассмотрим пример использования пошаговых функций в CSS, используя свойство transition-timing-function:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Скорость переходного эффекта в CSS (пошаговые функции).</title> <style> div { width: 100px; /* ширина элементов */ height: 60px; /* высота элементов */ background: khaki; /* устанавливаем цвет заднего фона */ border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */ margin-bottom: 10px; /* внешний отступ снизу */ } div:hover { width: 550px; /* ширина элемента при наведении */ } .test { transition-duration: 3s; /* продолжительность переходного эффекта 3 секунды */ transition-timing-function: steps(5, end); /* указываем значение функции перехода (пошаговая функция) */ } .test2 { transition-duration: 3s; /* продолжительность переходного эффекта 3 секунды */ transition-timing-function: steps(5, start); /* указываем значение функции перехода (пошаговая функция) */ } .test3 { transition-timing-function: step-start; /* указываем значение функции перехода (пошаговая функция) */ } .test4 { transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */ transition-timing-function: step-end; /* указываем значение функции перехода (пошаговая функция) */ } </style> </head> <body> <div class = "test">steps(5, end)</div> <div class = "test2">steps(5, start)</div> <div class = "test3">step-start</div> <div class = "test4">step-end</div> </body> </html>
В этом примере с использованием CSS свойства transition-timing-function мы указали различные пошаговые функции.
Обратите внимание, что при использовании функции step-start значение свойства transition-duration (продолжительность перехода) игнорируется, а при использовании функции step-end оно выступает в роли задержки перехода.
Результат нашего примера:
Рис. 169 Скорость переходного эффекта в CSS (пошаговые функции).Универсальное свойство transition
Ну и апогеем этой статьи послужит изучение свойства transition, оно является универсальным и позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.
Это свойство является короткой записью для следующих свойств, которые мы изучили (список соответствует порядку указания значений):
Синтаксис свойства:
transition:"property duration timing-function delay"; /* порядок важен */
Обращаю Ваше внимание, что если вы хотите задать только задержку (transition-delay), то вам придется указать и продолжительность (transition-duration) равную нулю (0s). Например, если вы хотите указать задержку 4 секунды, то вам необходимо записать это так:
transition: 0s 4s; /* задержка четыре секунды */
Допускается перечислять эффект перехода отдельно для каждого свойства в одном объявлении. Вы можете указывать не все значения, но при этом необходимо соблюдать порядок свойств, указанный выше.
transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s; /* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды, при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease) и это всё происходит с предварительной задержкой в 100 миллисекунд. Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде, при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear) и это всё происходит с предварительной задержкой в 2 секунды. Свойство background будет применено с задержкой 4 секунды. */
Давайте, в заключение статьи рассмотрим пример в котором создадим переходный эффект для элемента <input>.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Пример использования универсального свойства transition</title> <style> input[type=text] { width: 20%; /* ширина элемента */ transition: width 500ms ease-in-out; /* описываем переходный эффект (свойство, продолжительность и функция) */ } input[type=text]:focus { width: 40%; /* ширина элемента при фокусе на элементе */ } </style> </head> <body> Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос"> </body> </html>
В этом примере с использованием CSS свойства transition мы указали какое свойство подлежит переходному эффекту, продолжительность эффекта и указали функцию, определяющую скорость переходного эффекта в различные промежутки времени.
Результат нашего примера:
Рис. 170 Пример использования универсального свойства transition.Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующий документ:
Практическое задание № 33.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
© 2016-2021 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]
«Hover Effect» для мобильных кнопок
Типичный экран интерфейса состоит из множества элементов. Эффекты наведения визуально указывают пользователям на элементы, с которыми они могут взаимодействовать. Но есть проблема – эффекты наведения доступны к использованию лишь для десктоп приложений.
Читайте также:
В каких случаях необходимы кнопки с индикатором загрузки
7 дней дизайн-перезагрузкиМощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB
Почему не нужно выделять неактивные кнопки серым цветом
На мобильном отсутствует мышь, поэтому пользователи не могут использовать эффекты наведения мыши. Использование hover-эффекта в мобильных приложениях часто приводит к зависанию, при зажатии кнопок. Это неудобно и сильно раздражает пользователей, но в тоже время их также не устраивает двойное нажатие кнопок для выполнения какого-либо действия.
Удаление зависающего hover-эффекта недостаточно. Пользователи мобильных гаджетов нуждаются в визуальной обратной связи, потому что ошибочное нажатие кнопки – это очень распространенная проблема. Целевые размеры мобильных кнопок меньше десктопных версий, и их сложнее нажимать. От силы нажатия тоже многое зависит. Она должна быть установленной, т.к. иногда силы нажатия бывает недостаточно для активации действия, кнопка просто его не распознает.
Hover-эффект для мобильных кнопок – это волновой эффект (эффект ряби). Эффект ряби обеспечивает визуальную обратную связь, необходимую пользователям при нажатии кнопки. Пользователи видят на кнопке анимацию пульсации, которая гарантирует, что они точно нажимают кнопку. Если они не видят волнового эффекта, они сразу понимают, что ошиблись кнопкой или нажали/зажали ее с недостаточной силой.
Волновая анимация интуитивно понятна, потому что она имитирует прикосновение воды. Когда вы бросаете камень в пруд, на поверхности появляется рябь, это означает, что камень коснулся воды. Эффект ряби обеспечивает понятный визуальный фидбек для пользователя.
Важно преобразовать эффекты наведения в мобильные пульсации. Это придает пользователям уверенности в том, что они точно нажимают необходимую им кнопку. Это не совсем hover-эффект, но он обеспечивает ту же визуальную обратную связь, которая нужна пользователям при взаимодействии с кнопками.
Woocommerce Shop Hover Effects Супер эффекты анимация CSS3 плагин
На чтение 2 мин.
Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для интернет-магазина Woocommerce ! Сегодня вы узнаете о Супер плагине, который добавит в ваш интернет-магазин Woocommerce — анимацию CSS3. Вы сможете добавить эффекты анимации для анонсов товаров на странице «Магазин». При загрузке страницы магазина, анонсы товаров будут загружаться с определённым эффектом. Можно добавить анимацию при наведении курсора мыши на анонс товара. Можно добавлять анимацию к каждому элементу анонса по отдельности, к изображению, цене, кнопки. Большой выбор эффектов анимации CSS3. Простой и классный плагин !
Установить плагин Woo Shop Hover Effects вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, после установки и активации плагина, перейдите на страницу: Woocommerce — Hover Effects. Здесь вы сможете выбрать эффекты анимации для анонсов товаров и для отдельных элементов анонсов.
Store on Load Animations.
— Animation Style, здесь можно выбрать эффект анимации для загрузки анонсов товаров.
— Animation Duration (ms), здесь можно установить время продолжительности анимации в миллисекундах.
— Animation Delay (ms), время задержки перед анимацией в миллисекундах.
Shop Items Hover Effects.
— Title, можно выбрать эффект для заголовка товара при наведении на анонс товара.
— Price, можно выбрать эффект для цены товара при наведении на анонс товара.
— Thumbnail, можно выбрать эффект для изображения товара при наведении на анонс товара.
— Sale Badge, можно выбрать эффект для надписи «Распродажа» товара при наведении на анонс товара.
— Add to Cart Button, выбрать эффект для кнопки «Добавить в корзину» товара при наведении на анонс товара.
— Save Settings, сохраните сделанные изменения.
Всё готово ! После сохранения настроек, анонсы товаров на странице «Магазин», будут отображаться с эффектом анимации.
Hover эффекты CSS
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Как использовать animate.cssПосмотрим правде в глаза, новые функции CSS3, которые впервые привлекли наше внимание, были анимации и переходы. Это то, чего у нас никогда не было раньше без включения JavaScript. И только то, что это CSS, не означает, что нет библиотек, которые Читать далее
Как использовать фильтры CSSФильтры CSS — это мощный инструмент, который позволяет нам создавать удивительные визуальные эффекты с нашими элементами. Особенно они хороши для hover эффектов. Фильтры предоставляют нам методы для изменения рендеринга базового элемента DOM. Они позволяют сделать такие эффекты, как например, размытие, Читать далее
Как сделать прогресс бар на CSSПрогресс бар начал использоваться в интернете с тех пор, как мы поняли, что не все будет загружаться мгновенно. Он служит для уведомления пользователя о ходе выполнения конкретной задачи на вашем веб-сайте, такой как загрузка, выгрузка, загрузка приложения и т.д. Раньше Читать далее
Прижать футер с помощью FlexboxСоздание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее
CSS animationСвойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как цвет, цвет фона, высота или ширина. В этой статье рассмотрим на примерах, как использовать анимацию на чистом CSS с помощью этого свойства. Каждую анимацию необходимо определить Читать далее
CSS transitionCSS transition — это свойство, с помощью которого можно сделать плавные эффекты перехода элемента из одного состояния в другое. Ну например плавное изменение цвета блока при наведении. Выглядит это современно, а применяется очень просто и не надо использовать JavaScript. В Читать далее
Использование функции CSS calc()С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее
15+ CSS ПРИМЕР ГЛАВНЫХ ЭФФЕКТОВ
ЕСЛИ ВАМ НРАВИТСЯ САМОЛЕТ, ТО ПОСМОТРИТЕ БОЛЬШЕ 40+ Пример потрясающих CSS-эффектов при наведении курсора
1. Название: -Кнопки
Автор: -Элица Димитрова
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режимаЭто десять кнопок с эффектами наведения CSS. Для эффектов используются переходы, текстовые тени, анимация и трансформации.
2. Название: -CSS Hover Effects
Автор: -Rosa
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима9 эффектов наведения карты CSS с использованием переходов и преобразований
3. Название: -Текстовые эффекты наведения
Автор: -Matteo
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима 4.Заголовок: - Эффекты наведения на кнопку с box-shadow
Автор: -Giana
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима 5. Название: -10 потрясающих эффектов при наведении курсора
Автор: -Ренан С. Араужо
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима 6. Название: - Карты глубины параллакса
Автор: - Энди Мерскин
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима 7.Название: -Button Hover Effects
Автор: -Ритчи Джейкобс
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режимаButton hover экспериментирует с псевдоэлементами.
8. Название: -Библиотека миксинов Sass для наведения текста
Автор: -Antonija Šimic
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режимаДемо для библиотеки миксинов sass для эффектов наведения текста
9.Заголовок: -Hover эффекты с CSS3
Автор: -Jacob Stone Design
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима 10. Название: -CSS3 Эффекты при наведении курсора на кнопку FontAwesome
Автор: -foxeisen
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима 11. Название: -CSS Card Hover Effects
Автор: -Jhonier Riascos Zapata
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима 12.Название: -CSS3 Button Hover Effects with FontAwesome
Автор: -foxeisen
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режимаЭффекты наведения кнопки на чистом CSS3
13. Название: -Pure-CSS Netflix Show Carousel
Автор: -Джош Хант
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режима 14.Название: -Простой световой эффект наведения
Автор: -Аржан Джассал
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режимаЭффекты наведения — это весело.
15. Название: -Анимированная кнопка наведения
Автор: -Sammy Helali
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режимаПростая кнопка с анимацией наведения
16.Название: -3D эффект парящей плоскости
Автор: -Риан Ариона
Сделано с помощью: - HTML CSS JAVASCRIPT
Войти в полноэкранный режимВыйти из полноэкранного режимаПростой эффект наведения трехмерной плоскости с использованием преобразования CSS3
17. Название: -Button Hover
Автор: -Кэтрин Като
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режимаЧистый CSS (SCSS) эффект наведения кнопки со стрелкой.
18. Название: -CSS3 Hover Effect using: after Psuedo Element
Автор: -Ларри Гимс Паранган
Сделано с помощью: - HTML CSS
Войти в полноэкранный режимВыйти из полноэкранного режимаЕСЛИ ВАМ НРАВИТСЯ САМОЛЕТ, ТО УЗНАЙТЕ БОЛЬШЕ 40+ Пример потрясающих CSS-эффектов при наведении курсора
Hover Effects — легко создать любой эффект наведения — плагин для WordPress
Все эффекты используют один элемент (с помощью некоторых псевдоэлементов, где это необходимо), являются самодостаточными, поэтому вы можете легко их копировать и вставлять.
Многие эффекты используют функции CSS3, такие как переходы, преобразования и анимации. Старые браузеры, которые не поддерживают эти функции, могут нуждаться в дополнительном внимании, чтобы убедиться, что резервный эффект наведения все еще действует.
Основные характеристики
- 39 эффектов наведения
- Удобство использования
- Используйте в меню
- Использовать для любого элемента
2D переходы
- Рост
- Усадочная
- Импульсный
- Pulse Grow
- Импульсная термоусадочная
- Нажим
- Поп
- Отскок в
- Bounce Out
- Повернуть
- Увеличить Повернуть
- Поплавок
- Раковина
- Боб
- Повесить
- перекос
- Наклон вперед
- Наклон назад
- Колебание по горизонтали
- Колебание по вертикали
- Колебание вниз вправо
- Колебание вверх вправо
- качающийся верх
- Колебание дна
- Наклон качания
- Жужжание
- Buzz Out
- Вперед
- Назад
Переходы тени и свечения
- Тень
- Grow Shadow
- Плавающая тень
- Свечение
- Shadow Radial
- Box Shadow Outset
- Вставка Box Shadow
Речевые пузыри
- Пузырьковый верх
- Пузырь правый
- Пузырьковое дно
- Пузырь слева
- Верхняя часть пузырчатого поплавка
- Пузырьковый поплавок правый
- Дно пузырькового поплавка
- Пузырьковый поплавок слева
Используйте с другими плагинами для достижения максимальных результатов
Опора
Ищите ответы и задавайте вопросы в центре поддержки
- Вариант установки 1. Найдите и установите этот плагин в
Plugins
->Добавьте новый раздел
в свойwp-admin
- Вариант установки 2: Загрузите zip-файл, затем загрузите плагин через wp-admin в
Plugins
->Добавьте новый раздел
.Или распаковать архив и загрузить папку в каталог плагинов/ wp-content / plugins /
по ftp - Нажмите
Активируйте
, если вы установили плагин через панель управления, или нажмитеАктивируйте
в спискеПлагины
Как использовать плагин Hover Link?
Просто добавьте класс эффекта к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и так далее. Класс находится под именем эффекта
.- Перейти на страницу Эффекты при наведении
- Выберите эффект и скопируйте класс (начинаются с «hvr-«)
- Перейдите в «Внешний вид» -> «Меню», выберите пункт меню, к которому вы хотите добавить эффект, и добавьте класс эффекта в «Классы CSS (необязательно)».
- Сохраните меню
Почему я не вижу возможности добавить классы?
В разделе «Внешний вид» -> «Меню» нажмите «Параметры экрана» (в правом верхнем углу экрана) и убедитесь, что установлен флажок «Классы CSS».Если нет — проверьте!
«Эффекты наведения — легко создать любой эффект наведения» — программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.
авторов2,1
- Добавлено: функция копирования класса
2,0
- Изменено: Административный стиль
- Исправлено: мелкие ошибки
1,0
Image Hover Effects — плагин для WordPress — плагин для WordPress
Лучший многоцелевой плагин для WordPress
Image hover effects — это потрясающая коллекция чистых эффектов CSS3 с красивой анимацией, которую вы можете применять к неограниченному количеству изображений с заголовками и описаниями.Его действительно быстро и легко настроить любой пользователь, не обладающий какими-либо техническими знаниями. Его можно использовать для отображения галереи, команды, портфолио и многого другого. Эффекты наведения на изображение также имеют возможность отображать изображения в слайдере.
Он содержит все эффекты, которые полностью реагируют на все устройства, а эффекты наведения активируются касанием. Это позволяет пользователю добавлять 40+ эффектов наведения к изображениям с подписями. Он включает 40+ эффектов наведения с 2 различными стилями и полностью управляемыми параметрами администратора. . Вы можете создать несколько категорий с несколькими шорткодами.
Это самый быстрый и самый простой плагин, который можно настроить всего за несколько минут. Это единственный плагин, который предлагает гибкие параметры лайтбокса.
Это многоцелевой плагин для wordpress. Вы можете использовать его для отображения продуктов , портфолио, отзывов, галерей изображений и членов команды.
Предварительные просмотры
Главный ДЕМО Здесь
Нужна помощь?
Форум поддержки| Свяжитесь с нами | Документация
Характеристики
- Чистые эффекты CSS3
- Lightbox включен
- Полностью отзывчивый
- 40+ эффектов наведения
- Показать изображения в слайдере
- 10+ анимаций на свитке
- Несколько шорткодов
- Несколько категорий
- Генератор коротких кодов
- Параметр предварительного просмотра изображения доступен на странице настроек
- Изображение загружено с медиа
- Изменить заголовок заголовка и цвет описания
- На основе AJAX
- Быстро
- Простота использования
- Параметры простого администратора
- Анимированный
- Быстрый
Видеоурок
Отзыв
Если вам нравится наша работа, не забудьте поставить свою оценку.Ваш отзыв действительно важен для нас.
Доступно расширение Visual Composer
Now Visual Composer Extension также доступен с множеством опций настройки.
Получите бесплатное расширение Visual Composer
- Настройки администратора
- Плагин в действии
- Перейдите к подключаемым модулям на панели управления и выберите «добавить новый»
- Найдите «Image Hover Effects» и установите его
- Выберите «Панель управления»> «Эффекты при наведении курсора».Варианты сохранения
- Получить шорткод с помощью кнопки «Получить шорткод»
- Используйте сокращенный код в сообщениях, страницах или произвольных типах сообщений
- Теперь посетите эту страницу и посмотрите на плагин в действии
Я использовал платную про версию плагина. Использование плагина значительно увеличило время загрузки сайта. После обновления я больше не мог настраивать плагин Image Hover Effects Pro, потому что страница конфигурации на панели инструментов WordPress больше не загружалась.Отображается только символ загрузки, я больше не могу вносить изменения. Деактивация других плагинов (например, плагин кеширования), а также деактивация и повторная активация Image Hover Effects Pro не увенчались успехом. Ответ на мой запрос пришел через несколько дней — слишком долго для коммерческого продукта, используемого на веб-сайте клиента.
К сожалению, этот плагин очень замедляет загрузку моих страниц, а на планшете страницы часто не загружаются вообще.Я купил профессиональную версию, но для получения обслуживания потребовалось так много шагов, что я понесла убытки и воспользуюсь другим плагином.
Лабиб Ахмед, вы мне очень помогли! На самом деле спасибо за поддержку! Image Hover Effects Pro — это профессионально разработанный плагин, созданный профессионалами!
У меня были некоторые начальные проблемы, но разработчик мне очень помог Спасибо за внимание Лабиб! Tive alguns issuesas iniciais mas desenvolvedor me ajudou muito Obrigado pela atenção Labib!
Это было действительно просто, легко и быстро настроить.Люблю это Отличный плагин
По какой-то причине исходный плагин больше не позволял мне сохранять изображение. Я связался с Лабибом, и он прислал мне новую версию плагина. После того, как я установил новый плагин, я столкнулся с другой проблемой, когда изображения не отображались должным образом на моем мобильном телефоне. И снова Лабиб помог решить проблему. Отличная поддержка и отличный плагин. Весь мой сайт использует этот плагин, поэтому было очень важно решить проблемы, с которыми я столкнулся.Лабиб справился с задачей и устремился вперед!
Посмотреть все 41 отзыв«Image Hover Effects — WordPress Plugin» — программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.
авторов5,0
- Улучшенные настройки администратора
- Добавлена опция адаптивной типографики
- Добавлен ползунок
4,8
- Добавлен прокручиваемый контент
- Добавлена опция адаптивных размеров
4.7,2
- Добавлена опция анимации прокрутки
4.7.1
- Добавлена опция анимации прокрутки
4,6
- Добавлен импорт / экспорт через файл json
4,5
4,2
- Проблема с вновь добавленным изображением устранена
4,1
- Проблема с палитрой цветов устранена
- Решены некоторые проблемы, связанные с пользовательским интерфейсом
4,0
3,0
- Проблема с коротким кодом для нескольких категорий устранена
2.0
3,0
- Проблема с коротким кодом для нескольких категорий устранена
Начало работы с эффектами наведения изображения
Эффекты наведения являются частью большинства дизайнов сайтов. Они могут быть простыми — например, увеличение изображения — или запускать многоступенчатую анимацию. В этом уроке мы познакомим вас с некоторыми основами и парой немного более продвинутых приемов, которые помогут вам начать интегрировать эффекты наведения в свои собственные проекты.
Эффекты наведения придают дизайну интерактивность и движение, делая работу в Интернете более динамичной.Независимо от того, указывают ли они на активную ссылку или вызывают всплеск анимации, эффекты наведения дают вам немедленную обратную связь. Они могут направлять посетителей к желаемому действию или выступать в качестве художественного украшения, оживляющего цифровое пространство.
Эффекты наведения различаются по сложности, но создание простых в Webflow включает в себя:
- Выбор элемента, к которому вы хотите применить эффект наведения
- Переключение меню состояний в состояние наведения и настройка стиля
- Вернуться к состояние none и добавление перехода
Давайте начнем с рассмотрения того, как эти 3 шага можно использовать для создания одного из самых простых взаимодействий — наведения и масштабирования.
Создание базового эффекта наведения и масштабирования
Да-да! При наведении курсора на эту причудливую структуру она становится больше. Чтобы показать вам, как создать свой собственный эффект увеличения при наведении, мы расскажем, как мы его создали. Хотите следить за мной? Откройте проект в Webflow.
Щелчок по изображению выбирает его в навигаторе и показывает его имя: image-bg. Навигатор показывает иерархию элементов, и мы видим, что изображение содержится в блоке div с именем: divZoomImage.
Чтобы узнать, что происходит с этим изображением, когда мы наводим на него курсор, мы можем выбрать наведение в раскрывающемся меню состояний для этого элемента. Мы видим эффект трансформации, увеличивающий его в 1,2 раза по осям X и Y.
Эффект преобразования является частью состояния наведения. Скорость роста дома — это переход, который добавляется к состоянию «нет» (или состоянию по умолчанию). Переход установлен на время более 500 миллисекунд и имеет простой режим… ну, легкость.
Это пример эффекта наведения, применяемого к изображению — но что, если мы хотим поиграть с фигурами? Этот эффект перехода от круга к квадрату следует тому же процессу, с состоянием none, содержащим переход между состояниями, и зависанием, управляющим тем, что происходит в состоянии наведения.
В состоянии наведения это просто блок div с синим фоном.
Переход в состояние none показывает, что к углам применен радиус 50%, что создает круг. Таким образом, он превращается из круга (с углами, установленными с радиусом 50%) в квадрат (с радиусом углов, установленным на 0%).
Время перехода 350 мс управляет скоростью этого преобразования из круга в квадрат. Это может выглядеть как сложная анимация, но это просто вопрос уменьшения округлости круга до тех пор, пока у него не появятся углы, в результате чего получится простой синий блок div.
Различные состояния отсутствия, наведения, нажатия и фокусировки в меню состояний известны как псевдоклассы. Мы не будем вдаваться в подробности о различиях между ними здесь, но ознакомьтесь с этим руководством в Webflow University, чтобы узнать больше.
Вы также можете перейти на эту страницу полигона в Webflow. В нем есть эти эффекты наведения и многое другое для изучения — просто щелкните значок Pages на левой панели инструментов.
Использование фильтров для выхода за рамки основ
Мы рассмотрели добавление эффектов в состояние наведения и установку времени перехода в состояние «нет».Чтобы создать более сложные эффекты наведения, такие как постепенное появление или исчезновение элемента или раскрашивание изображения в градациях серого, нам необходимо применить фильтры.
Latinxs Who Design — это выставка дизайнеров, организованных в виде сетки. При наведении курсора на каждый черно-белый снимок в голову он окрашивается и увеличивается.
Давайте посмотрим, что происходит при наведении курсора.
Здесь мы видим эффект преобразования (точно так же, как масштабирование при наведении, которое мы рассматривали ранее), который масштабирует изображение вверх на 1.2 раза по осям X и Y.
Также есть два фильтра: насыщенность установлена на 110%, а контрастность имеет значение 120%.
Давайте вернемся в состояние none и посмотрим, с чего начинаются эти фильтры.
Мы видим, что насыщенность начинается с 0%, что удаляет весь цвет, преобразовывая изображения в черно-белые. Контрастность начинается со 109% и увеличивается до 120% при наведении курсора, делая изображение более выраженным, а этот эффект — более драматичным.К обоим эффектам применяется время перехода 800 миллисекунд.
Наряду с насыщенностью и контрастом есть и другие фильтры на выбор, такие как поворот оттенка и размытие. Ради интереса давайте добавим фильтр размытия с радиусом по умолчанию 5 пикселей и посмотрим, как это выглядит.
Да, это многовато, если не учитывать влияние оригинального эффекта. Проявление сдержанности и отсутствие нагромождения эффектов делает интерактивные элементы интересными, а не раздражающими.
Если вы хотите клонировать или изучить этот дизайн дальше, проверьте его на Webflow.
Создавайте взаимодействия и анимацию без кода
Создавайте сложные взаимодействия и анимации, даже не глядя на код.
Начать анимацию
Подпишитесь, чтобы стать участником программы предварительной оценки Webflow
Спасибо! Теперь вы подписаны!
Ой! Что-то пошло не так при подписке.
Начало анимации
Начало работы с синхронизированными действиями
Что делать, если вы хотите создать более сложные эффекты наведения, например запускаемую анимацию с несколькими синхронизированными шагами? На интерактивной фотографии выше, сделанной Digital Bake, на несколько элементов влияет анимация, запускаемая при наведении курсора мыши на них.
Страница группы — отличный способ персонализировать ваш бизнес, но эти страницы, как правило, статичны и не вызывают особого визуального интереса, чтобы удерживать ваше внимание. Digital Bake привносит интерактивность в то, что часто упускается из виду.
Все элементы содержатся в блоке div «Team Member Wrapper». Символ болта рядом с ним в навигаторе говорит нам, что взаимодействие было применено.
Давайте посмотрим на это взаимодействие:
Он имеет триггер элемента, что означает, что при наведении курсора на блок div «Team Member Wrapper» запускается анимация.
При нажатии кнопки «Наведение мыши» открывается подробная информация об этой запущенной анимации.
Вот запускаемые по времени анимации. Мы проигнорируем те, которые озаглавлены «СИСТЕМА», так как сосредоточимся на изображении члена команды.
Предварительный просмотр показывает нам эту запускаемую анимацию в действии.
Вот синхронизированные действия, составляющие эту анимацию при наведении.
«Член команды Читать дальше» начинается с непрозрачности 0%, которая увеличивается до 100% в течение 20 секунд и вызывает появление кнопки «Читать дальше».
Вот оно в начале:
И через 20 секунд:
«Изображение члена команды» масштабируется до 1,05 по осям X и Y, начиная с 0 секунд:
«Наведение на члена команды» Out »просто отменяет этот эффект, возвращая изображение обратно в состояние по умолчанию и заставляя кнопку« Читать дальше »исчезнуть.
Узнайте подробнее, как это было сделано, открыв его в Webflow. Есть несколько дополнительных анимаций, которые не имеют ничего общего с тем, что мы сфокусировали на этом посте, но не стесняйтесь исследовать, что еще происходит в этом дизайне.И ознакомьтесь с нашим руководством по триггерам и анимации для более подробного объяснения.
Переход к более продвинутым технологиям путем создания 3D-карты команды
Эта 3D-карта члена команды (также любезно предоставленная Digital Bake) основана на основах эффекта наведения, которые мы уже рассмотрели.
Давайте посмотрим, как это было сделано.
Каждая часть этого блока содержится в блоке связи с именем «Card Wrapper». Вот его элементы:
Как и в предыдущем примере, мы видим, что на эти элементы влияет взаимодействие.
Щелчок по значку взаимодействия сообщает нам, что это инициированное взаимодействие, инициированное наведением курсора мыши на элемент. В данном случае «Card Wrapper».
Давайте исследуем это, щелкнув мышью на элементе команды «Наведите указатель мыши» и посмотрев на действия мыши X.
Вместо временной шкалы мы получаем диапазон от 0% до 100%, который представляет собой движение при наведении курсора по оси X, перемещающееся вперед и назад в этой горизонтальной плоскости, при этом 0% является левой стороной изображения и 100% правильный.
Ко всей «оболочке карты» применен эффект поворота, в то время как другие элементы просто перемещаются в поперечном направлении по оси X.
Хорошо, давайте посмотрим, что происходит с действиями мыши Y.
И снова мы получаем диапазон 0–100%, который представляет собой движение по оси Y, запускающее каждое событие этой анимации. 0% находится вверху страницы, а 100% — внизу.
Вы также можете клонировать его для собственного использования и посмотреть, как он был построен в Webflow.
Дальше с эффектами наведения
Эффекты наведения определенно делают дизайн более интересным. Статические страницы заставляют скучать статичный мозг.
Есть много других эффектов наведения, которые вы можете попробовать, но, надеюсь, этого вступления будет достаточно, чтобы вы начали. Перейдите на наш курс взаимодействия и анимации, чтобы узнать больше и увидеть, что можно сделать для ваших собственных дизайнов.
Как добавить эффект наведения в Divi Builder
Одним из преимуществ использования конструктора страниц, такого как Divi Builder, на вашем сайте WordPress, является то, что вы можете добавлять эффекты анимации на страницу без необходимости устанавливать дополнительный плагин.Один из типов анимации, который вы можете добавить, — это эффект наведения, который будет реагировать, когда посетитель наводит курсор на определенный элемент на странице. Взгляните на гифку ниже.
Как видите, элементы изображения на GIF выше совершают определенное движение, когда на них наведен курсор.
Divi Builder позволяет добавить эффект наведения к любому элементу. Будь то раздел, строка, столбец или модуль. Сам Divi Builder использует преобразование CSS для эффекта наведения. Вы можете добавить 5 вариантов эффекта наведения:
- Масштаб
- Перевести
- Повернуть
- Наклон
- Начало
В Divi Builder вы можете использовать разные настройки элемента для нормального состояния и состояния наведения. .Например, вы можете использовать другой фон как в нормальном состоянии, так и в состоянии наведения. Благодаря этому вы можете, например, изменить изображение при наведении курсора, используя встроенную функцию эффекта наведения в Divi Builder. Еще одна интересная вещь при добавлении эффекта наведения в Divi Builder — это то, что вы можете установить продолжительность перехода (переход из нормального состояния в состояние наведения). Вот как добавить эффект наведения в Divi Builder.
Как добавить эффект наведения в Divi Builder
Как уже упоминалось, вы можете добавить эффект наведения к любому элементу в Divi Builder.В этом примере мы покажем вам, как добавить эффект наведения к модулю изображения.
Прежде всего, добавьте новый модуль, щелкнув серый значок плюса в области холста и выбрав «Изображение». Выберите изображение, которое хотите использовать.
На панели настроек модуля изображения перейдите на вкладку Design и откройте блок Transform . В блоке Transform щелкните значок курсора, а затем вкладку наведения (которая также представлена значком курсора).
Выберите стиль преобразования, который вы хотите добавить, и с помощью мыши установите значение преобразования.Или, если вы хотите установить конкретное значение преобразования вручную, вы также можете сделать это. Просто введите желаемое значение в доступные поля.
Установка длительности преобразования
Чтобы установить продолжительность преобразования, вы можете перейти на вкладку Advanced на панели настроек и открыть блок Transitions . Вы можете установить продолжительность преобразования в опции Transition Duration . Из этого блока вы также можете установить задержку перехода, а также кривую скорости перехода.
Не забудьте щелкнуть зеленый значок контрольного списка в правом нижнем углу панели настроек, как только вы закончите настройку.
Вы можете пройти по тому же маршруту, чтобы добавить эффект наведения к другим элементам. Чтобы добавить к разделу эффект наведения, вы можете открыть панель настроек раздела, щелкнув значок шестеренки на ручке раздела (синяя ручка). Чтобы добавить к строке эффект наведения, вы можете открыть панель настроек строки, щелкнув значок шестеренки на ручке строки (зеленая ручка).Чтобы добавить эффект наведения к столбцу, вы можете открыть панель настроек строки. Вы можете прочитать эту статью, чтобы добавить эффект наведения к столбцу в Divi Builder.
Простое добавление эффектов наведения к изображениям на вашем веб-сайте
Еще никогда не было так просто добавить эффекты наведения к изображениям на вашем веб-сайте
Появление | Катинель | Комодо | Лукавый | Занавес | Жидкость вверх | Скрыть | Линза | Пуфробо | Тихо | Рефлекс | Seemo | Под изображением
Шаг 1 — Установите Modula
Самый простой и, несомненно, лучший способ добавить эффекты наведения к изображениям на вашем веб-сайте WordPress — это установить Modula — самый мощный и удобный плагин галереи WordPress.
Шаг 2. Создание галереи
Сначала вам нужно будет создать новую галерею или отредактировать существующую. Вам должно быть очень легко создать свою первую галерею с помощью Modula, но вот краткое объяснение, которое должно прояснить вам ситуацию.
- Чтобы создать новую галерею, перейдите в Modula> и нажмите «Добавить» .
- Всего через несколько секунд загрузки вы автоматически попадете на экран редактирования галереи, чтобы вы могли сразу же начать работу над своей галереей.
Шаг 3. Загрузите изображения
Затем загрузите выбранный вами набор изображений в вашу недавно созданную галерею.
Пора добавить эти гифки в вашу галереюДля этого нажмите Загрузить файлы изображений, Выбрать из библиотеки или просто перетащите фотографии, к которым вы хотите применить эффект наведения, в галерею на страницу редактирования галереи.
Шаг 4. Выберите эффект наведения
Перейдите в Modula Settings> Hover Effect , чтобы выбрать эффект, который вам больше всего нравится, протестировав каждый из них на странице редактирования галереи.
Шаг 5. Публикация галереи
Последний шаг — Опубликуйте вашу новую галерею для всеобщего обозрения, скопируйте и вставьте шорткод в любой пост или страницу, где вы хотите, чтобы изображения с желаемым эффектом наведения появлялись.
Внутренний вид галереи GIF, созданной с помощью ModulaТребования
300+ CSS-эффекты при наведении курсора на изображение с текстовой анимацией Пример
- На главную
- Веб-дизайн jQuery
- Темы для веб-сайтов
- Бесплатные шаблоны
- CSS CodeLab
- Плагины для AngularJS
- Блог
- Отправьте учебное пособие
Framework: Bootstrap Вид Стиль эффекта наведения 310
Framework: Bootstrap Вид Стиль эффекта наведения 309
Framework: Bootstrap Вид Стиль эффекта наведения 308
Framework: Bootstrap Вид Стиль эффекта наведения 307
Framework: Bootstrap Вид Стиль эффекта наведения 306
Framework: Bootstrap Вид Стиль эффекта наведения 305
Framework: Bootstrap Вид Стиль эффекта наведения 304
Framework: Bootstrap Вид Стиль эффекта наведения 303
Framework: Bootstrap Вид Стиль эффекта наведения 302
Framework: Bootstrap 12345…102030 … »Последняя»
Категории кода
- Эффекты наведения (311)
- прелоадер (308)
- Сервисный ящик (195)
- Таблица цен (194)
- Сетка продуктов (193)
- Стиль счетчика (155)
- Эффект наведения ссылки (148)
- Хронология (145)
- Пуговица (136)
- Пагинация (123)
- Текстовые эффекты (115)
- Выпадающее меню (101)
- Вкладки (98)
- Вертикальный выступ (90)
- Аккордеон (88)
- Стиль модели (84)
- Ползунок диапазона (83)
- Подпись электронной почты (80)
- Индикатор выполнения (79)
- Витрина команды (76)
- Витрина отзывов (73)
- Формы (53)
- Слайдер новостей (33)
- Пользовательский флажок (21)
- Подсказка (20)
- Пользовательская радиокнопка (15)
- Стиль стола (14)
- Стиль панировочных сухарей (10)
CSS Framework
- Bootstrap (2486)
Другие лучшие ссылки jQuery
- Лучшие дизайны веб-сайтов jQuery
- Лучший шаблон и темы для веб-сайтов
- Учебники по Angular JS
- Фрагменты кода jQuery
- Бесплатные шаблоны
- CodeLab
- Блог
- RSS Feeds
JQuery Плагины Теги
3D SliderAutoCompleteBarcodeBlur EffectCalculatorCaptchaCheckboxColor PickerConfirm DialogContext MenuCookiesCountdown TimerCoverflowCurrency FormatDateTime PickerDialogEditableEvent CalendarFacebookFile UploadFilterFixed HeaderFlipbookForm SubmitForm ValidationForm WizardFullscreenGeolocationGridHistoryHtml5 Аудио PlayerHTML5 canvasHtml5 Местное StorageHtml5 Видео PlayerImage CropImage Hover EffectInstagramLazy LoadLoginMaskMega MenuMultiSelectNews TickerNotificationParallaxPlaceholderPortfolioPreloaderProgress BarRange SliderRatingRotate ImageScrollbarScrolling EffectsSelectBoxShopping CartSide MenuSocial ShareSortingTimelineTooltipTreeviewVideo BackgroundWeatherWebsite TourWysiwyg EditorYouTube© 2021 Лучший jQuery.