Как создать сверхбыстрое слайд шоу на CSS3

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

Сложность

css слайд шоу

Отображаем и скрываем изображения при помощи анимации:

.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.

.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% дольше. Второе изображение, будет наложено поверх текущего.

css задержка слайд-шоу

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

.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;
}


При наведении курсора, запускается CSS слайд шоу:

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

Вы можете увеличить уровень прозрачности фона для того, чтобы эффект был более утонченным. Обратите внимание, что изображения имеют одинаковый фон, который делает эффект менее вызывающим, чем если вы будете использовать различные цвета.

Перевод статьи How to Create a Fast Hover Slideshow with CSS3

Тэги: slideshow

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.