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

Демонстрация работы – Скачать исходный код

Мы хотим поделиться с вами опытом создания небольшой галереи, в которой изображения меняются при наведении указателя мыши. Основная задача в том, чтобы запустить очень быструю смену изображений, когда пользователь наводит указатель мыши, и показать текущее изображение, когда пользователь отводит указатель мыши. Это забавный эффект, с которым можно поэкспериментировать, идея которого нам пришла с сайта Contain.r. Мы будем использовать CSS анимацию для смены изображений и контролировать запуск и остановку с помощью свойства animation-play-state.

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

Вот наша простая структура:

<div>
<img src="images/1.jpg" alt="image01"/>
<img src="images/2.jpg" alt="image02"/>
<img src="images/3.jpg" alt="image03"/>
<img src="images/4.jpg" alt="image04"/>
<img src="images/5.jpg" alt="image05"/>
<img src="images/6.jpg" alt="image06"/>
<img src="images/7.jpg" alt="image07"/>
<img src="images/8.jpg" alt="image08"/>
<div>
<span>Summer <strong>2012</strong></span>
</div>
</div>

Мы показываем и прячем изображения, используя анимацию:

.hs-wrapper img{
top: 0px;
left: 0px;
position: absolute;
animation: showMe 0.8s linear infinite 0s forwards;
animation-play-state: paused;
}

Анимация будет останавливаться и запускаться только при наведении указателя мыши:

.hs-wrapper:hover img{
animation-play-state: running;
}

Анимация просто сделает изображение видимым и поместит его на самый верх:

@keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}

Как вы видите, у всех изображений будет одинаковая анимация, но для каждого изображения мы запустим ее с разной задержкой. Также мы хотим изменить порядок расположения изображений, назначив им соответствующее значения свойства z-index. Так как мы запустим всю анимацию на 0.8 секунд, мы отложим начало анимации для каждого изображения, кроме первого, на 0.1 секунду:

.hs-wrapper img:nth-child(1){
z-index: 9;
}
.hs-wrapper img:nth-child(2){
animation-delay: 0.1s;
z-index: 8;
}
.hs-wrapper img:nth-child(3){
animation-delay: 0.2s;
z-index: 7;
}
.hs-wrapper img:nth-child(4){
animation-delay: 0.3s;
z-index: 6;
}
<!-- ... и так далее -->

Проценты анимации вычисляются следующим образом: возьмем 100% времени анимации и распределим в нем 8 изображений. Каждое изображение показывается в течение 0.1 секунды, что означает, что мы хотим, чтобы следующее изображение показывалось на 12.5%. Второе изображение, которое будет показано, будет находится поверх текущего, хотя у них будет одинаковое значения свойства z-index, так как это изображение — следующее в структуре HTML. Мы также пробовали другие возможные варианты, чтобы не использовать свойство  z-index, например назначить 12,6% следующим шагом и т. п., но на наш взгляд, этот вариант работает наиболее плавно. Тем не менее, иногда возможно подтормаживание.

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

.hs-overlay{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 500;
background: rgba(0,0,0,0.6);
box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset;
pointer-events: none;
transition: all 0.3s linear;
}

При наведении указателя мыши, когда изображения начинают меняться, мы покажем накрывающий слой:

.hs-wrapper:hover .hs-overlay{
opacity: 1;
box-shadow: 0 0 0 5px rgba(255,255,255,0.3) inset;
}

Можно уменьшить уровень прозрачности у фонового изображения накрывающего слоя, чтобы эффект был менее заметным. Заметьте, что у изображений одинаковый фон, это меньше режет глаз, чем если бы у изображений был фон разного цвета. Черно-белые изображения с не очень прозрачным накрывающим слоем, как в Contain.r, хорошо подходят для этого эффекта.

Важно обратить внимание на то, что изображения обязательно должны быть загружены до запуска анимации, и применить что-то подобное тому, что рекомендовано здесь.

И это все. Надеемся, этот урок вдохновит вас.

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

• Выделение и просмотр изображений с использованием jQuery
• Создание трехмерной интерактивной галереи с использованием CSS и jQuery
• Простая контент-галерея с использованием jQuery и CSS3