Слайдшоу с использованием только CSS3

Для понимания работы данного слайдера необходимы базовые знания CSS, особенно, что касается CSS3 переходов и анимации. Используя эти возможности CSS3, мы покажем как сделать функциональный слайдер для изображений.

Основы CSS3-переходов (transitions)

Обычно, когда вы изменяете значение в CSS, изменение происходит мгновенно. Но благодаря свойству transition, мы можем легко анимировать переход от старого к новому состоянию.

Мы будем использовать четыре свойства transition:

transition-property
Определяет имя (имена) свойств CSS к которому переходы должны быть применены.

transition-duration
Определяет время,  за которое переходы должны происходить.

transition-timing-function
Определяет, как промежуточные значения transition будут рассчитывается.

transition-delay
Определяет, когда начинается переход. Создает временную задержку, перед началом перехода.

На данный момент CSS3-переходы поддерживаются Safari 3.2 +, Chrome, Firefox 4 +, Opera 10.5 + и IE 10. Поскольку технология все еще является относительно новой, префиксы для браузеров обязательны. Синтаксис одинаков для каждого браузера, только с соответствующим префиксом. Мы будем опускать эти префиксы в статье, но, пожалуйста, не забудьте указать их в вашем коде.

Итак, давайте посмотрим, как применить простой переход к ссылке:

a {
 color: #000;
 transition-property: color;
 transition-duration: 0.7s;
 transition-timing-function: ease-in;
 transition-delay: 0.3s;
}

a:hover {
 color: #fff;
}

При определении анимации для элемента, вы также можете использовать сокращенную запись:

{
 color: #000;
 transition: color 0.7s ease-in 0.3s;
}

a:hover {
 color: #fff;
}

На сайте W3C есть список всех "свойств, которые могут быть анимированы".

Основы CSS3-анимации

CSS-анимация позволяет создать анимацию без JavaScript при помощи keyframes (ключевых кадров).

В отличие от переходов, keyframes в настоящее время поддерживают только в webkit-браузеры и Firefox, а вскоре в IE 10. Остальные браузеры будут просто игнорировать код анимации.

Свойство анимации имеет восемь подсвойств:

animation-delay
Определяет, когда начинается анимация.

animation-direction
Позволяет воспроизводить анимацию в обратном направлении.

animation-duration
Определяет продолжительность времени анимации, необходимое для завершения одного цикла.

animation-iteration-count
Определяет, сколько раз цикл анимации должен проиграть.

animation-name
Определяет имя правила @keyframes.

animation-play-state
Определяет будет ли анимация работать или будет приостановлена.

animation-timing-function
Описывает, как анимация будет проходить один цикл.

animation-fill-mode
Определяет, как анимации следует применять стили к своей цели до и после выполнения.

Давайте посмотрим, как применить простую анимацию к тегу div.

/* Это элемент, к которому мы применяем анимацию. */
div {
 animation-name: move;
 animation-duration: 1s;
 animation-timing-function: ease-in-out;
 animation-delay: 0.5s;
 animation-iteration-count: 2;
 animation-direction: alternate;

 -moz-animation-name: move;
 -moz-animation-duration: 1s;
 -moz-animation-timing-function: ease-in-out;
 -moz-animation-delay: 0.5s;
 -moz-animation-iteration-count: 2;
 -moz-animation-direction: alternate;

 -webkit-animation-name: move;
 -webkit-animation-duration: 1s;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-delay: 0.5s;
 -webkit-animation-iteration-count: 2;
 -webkit-animation-direction: alternate;
}

/* Это код анимации. */

@keyframes move {
 from {
 transform: translateX(0);
 }
 to {
 transform: translateX(100px);
 }
}

@-moz-keyframes move {
 from {
 -moz-transform: translateX(0);
 }
 to {
 -moz-transform: translateX(100px);
 }
}

@-webkit-keyframes move {
 from {
 -webkit-transform: translateX(0);
 }
 to {
 -webkit-transform: translateX(100px);
 }
}

Мы можем использовать сокращенную запись для удобства и установить все свойства анимации одновременно.

 div {
 animation: move 1s ease-in-out 0.5s 2 alternate;
 -moz-animation: move 1s ease-in-out 0.5s 2 alternate;
 -webkit-animation: move 1s ease-in-out 0.5s 2 alternate;
}

Keyframes

Каждый кадр описывает, как анимированный элемент должен отображаться в данной точке в анимации. Keyframes принимают значения в процентах для указания времени: 0% - начало анимации, 100% - конец анимации. По желанию можно добавить ключевые кадры для промежуточной анимации.

 /* Анимация от 0% до 100% */

@keyframes move {
 0% { transform: translateX(0); }
 100% { transform: translateX(100px); }
}

/* Анимация с промежуточными keyframes */

@keyframes move {
 0% { transform: translateX(0); }
 50% { transform: translateX(20px); }
 100% { transform: translateX(100px); }
}

Сайт W3C имеет много полезной и подробной информации о "CSS3-анимации".

Базовая структура нашего слайдера

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

Слайдшоу с использованием только CSS3

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

Анимация очень проста: изображение следует по предопределенном пути, анимируем свойство top и изменяем свойства z-index и opacity, когда изображение возвращается в исходное положение.

Давайте посмотрим на HTML-разметку для нашего слайдера.

2. HTML-разметка

HTML-разметка очень проста. Давайте сначало посмотрим весь код, а затем объясним в деталях, как все работает.

 <div class="container">
 <div id="content-slider">
 <div id="slider">  <!-- Slider container -->
 <div id="mask">  <!-- Mask -->

 <ul>
 <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
 <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a>
 <div class="tooltip"> <h1>Cougar</h1> </div>
 </li>

 <li id="second" class="secondanimation">
 <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a>
 <div class="tooltip"> <h1>Lions</h1> </div>
 </li>

 <li id="third" class="thirdanimation">
 <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a>
 <div class="tooltip"> <h1>Snowalker</h1> </div>
 </li>

 <li id="fourth" class="fourthanimation">
 <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a>
 <div class="tooltip"> <h1>Howling</h1> </div>
 </li>

 <li id="fifth" class="fifthanimation">
 <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a>
 <div class="tooltip"> <h1>Sunbathing</h1> </div>
 </li>
 </ul>

 </div>  <!-- End Mask -->
 <div class="progress-bar"></div>  <!-- Progress Bar -->
 </div>  <!-- End Slider Container -->
 </div>
</div>

div id="slider"
Это основной контейнер слайдера. Он не имеет какой-либо функциональности, но он нам нужен, чтобы приостановить анимацию.

div id="mask"
Мы будем использовать этот блок, чтобы скрыть все, что происходит за пределами слайдера.

li id="first" class="firstanimation"
Каждый элемент списка имеет ID и класс. ID используется для вывода всплывающей подсказки, а класс связан с анимацией, которая должна произойти.

div class="tooltip"
Этот блок просто отображает название изображения. Вы можете изменять его под свои нужды, например, сделав его интерактивными или добавив краткое описание.

div class="progress-bar"
Этот блок содержит функцию, которая показывает ход выполнения анимации.

Теперь пришло время для CSS.

3. CSS

Давайте зададим основные стили для слайдера. Он будет иметь тот же размер, что и изображения. Свойство border будет полезно для создания рамки вокруг изображения.

 /* стили для слайдера */
#slider {
 background: #000;
 border: 5px solid #eaeaea;
 box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
 height: 320px;
 width: 680px;
 margin: 40px auto 0;
 overflow: visible;
 position: relative;
}

Класс mask будет скрывать все элементы, которые лежат за пределами слайдера, его высота должна быть равна высоте слайдера.

 /* скрываем все за пределами слайдера */
#mask {
 overflow: hidden;
 height: 320px;
}

Наконец, чтобы отсортировать список изображений, мы установим для них position: absolute и top:-325px, так что все изображения будут расположены за пределами слайдера.

 /* список изображений */
#slider ul {
 margin: 0;
 padding: 0;
 position: relative;
}

#slider li {
 width: 680px;  /* ширина изображения */
 height: 320px; /* высота изображения */
 position: absolute;
 top: -325px;    /* начальная позиция - за пределами слайдера */
 list-style: none;
}

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

4. CSS3 Keyframes Animation

Слайдшоу с использованием только CSS3

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

Общая продолжительность анимации будет 25 секунд, но мы должны знать, сколько ключевых кадров составляют 1 секунду.

Итак, давайте произведем некоторые расчеты:

Определим общее количество изображений для использования в слайдере:
5

Определим длину анимации для каждого изображения:
5 секунд

Определим общую продолжительность анимации.
Умножьте общее количество изображений на длительность показа каждого изображения:
5 изображений × 5 секунд = 25 секунд

Подсчитаем, сколько ключевых кадров равно одной секунде.
Разделим общее количество ключевых кадров на общую длительность анимации.
100 keyframes / 25 секунд = 4 keyframes
4 keyframes = 1 секунда

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

 #slider li.firstanimation {
 animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
 animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
 animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
 animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
 animation: cyclefive 25s linear infinite;
}

После того, как свойства анимации назначены, мы должны использовать keyframes для определения анимации в движении.

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

Я добавил свойства opacity и z-index, чтобы сделать переход от одного изображения к другому более привлекательным.

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

Вот весь код анимации:

 /* анимация */
@keyframes cycle {
 0%  { top: 0px; } /* When you start the slide, the first image is already visible */
 4%  { top: 0px; } /* Original Position */
 16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
 20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
 21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
 92% { top: -325px; opacity: 0; z-index: 0; }
 96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
 100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
 0%  { top: -325px; opacity: 0; } /* Original Position */
 16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
 20% { top: 0px; opacity: 1; }
 24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
 36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
 40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
 41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
 100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
 0%  { top: -325px; opacity: 0; }
 36% { top: -325px; opacity: 0; }
 40% { top: 0px; opacity: 1; }
 44% { top: 0px; opacity: 1; }
 56% { top: 0px; opacity: 1; }
 60% { top: 325px; opacity: 0; z-index: 0; }
 61% { top: -325px; opacity: 0; z-index: -1; }
 100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
 0%  { top: -325px; opacity: 0; }
 56% { top: -325px; opacity: 0; }
 60% { top: 0px; opacity: 1; }
 64% { top: 0px; opacity: 1; }
 76% { top: 0px; opacity: 1; z-index: 0; }
 80% { top: 325px; opacity: 0; z-index: 0; }
 81% { top: -325px; opacity: 0; z-index: -1; }
 100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
 0%  { top: -325px; opacity: 0; }
 76% { top: -325px; opacity: 0; }
 80% { top: 0px; opacity: 1; }
 84% { top: 0px; opacity: 1; }
 96% { top: 0px; opacity: 1; z-index: 0; }
 100%{ top: 325px; opacity: 0; z-index: 0; }
}

После создания анимации, мы должны добавить индикатор для отображения продолжительности каждой анимации.

5. Progress Bar

Progress Bar

Процесс анимации индикатора такой же, как и для слайдера. Во-первых, мы создадим индикатор (progress bar):

 /* progress bar */
.progress-bar {
 position: relative;
 top: -5px;
 width: 680px;
 height: 5px;
 background: #000;
 animation: fullexpand 25s ease-out infinite;
}

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

 /* анимация индикатора */
@keyframes fullexpand {
 /* In these keyframes, the progress-bar is stationary */
 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

 /* In these keyframes, the progress-bar starts to come alive */
 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

 /* In these keyframes, the progress-bar moves forward for 3 seconds */
 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

 /* In these keyframes, the progress-bar has finished his path */
 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

 /* In these keyframes, the progress-bar will disappear and then resume the cycle */
 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

6. Tooltip

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

Tooltip

Вот CSS для подсказки:

 #slider .tooltip {
 background: rgba(0,0,0,0.7);
 width: 300px;
 height: 60px;
 position: relative;
 bottom: 75px;
 left: -320px;
}

#slider .tooltip h1 {
 color: #fff;
 font-size: 24px;
 font-weight: 300;
 line-height: 60px;
 padding: 0 0 0 10px;
}

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

7. CSS3 Transitions

CSS3 Transitions

Мы видели, как применить CSS3-переходы для элементов, а теперь давайте сделаем это для подсказкок.

Если вы помните, мы добавили ID каждого элемента списка (first, second и т.д.), таким образом подсказка ассоциируется с изображением, которое появляется при наведении курсора мыши, а не все подсказки появляются вместе.

 #slider .tooltip {

 transition: all 0.3s ease-in-out;
}

#slider li#first: hover .tooltip,
#slider li#second: hover .tooltip,
#slider li#third: hover .tooltip,
#slider li#fourth: hover .tooltip,
#slider li#fifth: hover .tooltip {
 left: 0px;
}

8. Pause и Restart

Пауза и рестарт

Чтобы позволить пользователям сделать паузу, для того чтобы прочитать содержание или посмотреть на изображение, мы должны остановить анимацию при наведении курсора на изображение. (Мы также должны остановить анимацию индикатора).

 #slider: hover li,
#slider: hover .progress-bar {
 animation-play-state: paused;
}

9. Демонстрация

Наконец, мы подошли к концу урока. Слайдер теперь готов на 100%!

Демонстрация

Посмотрите демо-версию. Она работает в Firefox 5+, Safari 4+ и Google Chrome, а также iPhone и IPad. Вы также можете скачать ZIP-архив в исходниками.

Спасибо Massimo Righi за его изображения.

10. Заключение

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

Если вы хотите полную поддержку браузеров, то это не представляется возможным, поэтому рекомендуется пока использовать JavaScript. К сожалению, CSS3-анимация имеет много ограничений, и это будет препятствовать её широкому использованию в настоящее время. Но, надеюсь, этот пример будет стимулировать вас к дальнейшему изучению CSS3.

Перевод статьи с coding.smashingmagazine.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments