. Циклическое слайд-шоу на чистом CSS3
Циклическое слайд-шоу на чистом CSS3

Циклическое слайд-шоу на чистом CSS3

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

Разделы статьи

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

  1. ВведениеОписание базовых понятий, связанные с CSS3-переходами и анимацией по ключевым кадрам.
  2. Разметка HTMLСоздание HTML-разметки для слайдера изображений.
  3. Стили CSSСоздание таблицы стилей для отображения слайдера.
  4. CSS3-анимация по ключевым кадрамДобавление анимации к слайдеру. Мы рассмотрим различные процессы, происходящие здесь.
  5. Индикатор выполненияДобавление индикатора выполнения для нашего слайдера.
  6. Всплывающая подсказкаДобавление всплывающей подсказки, для отображения заголовков.
  7. CSS3-переходыВыводим подсказку при наведении курсором, используя CSS3-переходы
  8. Пауза и рестартОстановка слайдера при наведении курсором.
  9. ДемонстрацияПоказываем слайдер в действии.
  10. ЗаключениеЗаключительные размышления.
1. Введение

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

Базовые понятия CSS3-переходов

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

Мы можем использовать четыре свойства перехода:

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

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

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

transition-delay Определяет, когда переход запускается.

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

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

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

Базовые понятия CSS3-анимации

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

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

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

animation-direction Определяет, должна ли анимация играть в обратном направлении в чередующихся циклах.

animation-duration Определяет отрезок времени, который анимация занимает, чтобы завершить один цикл.

animation-iteration-count Определяет количество циклов анимации перед остановкой.

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

animation-play-state Определяет, проигрывается ли анимация или приостановлена.

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

Давайте посмотрим, как применить простую анимацию к блоку:

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

Ключевые кадры

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

У W3C есть много полезной и подробной информации про “CSS3-анимацию”

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

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

Как вы видите, слайдер будет контейнером, в котором будут отображаться изображения. Анимация очень проста: изображение следует по заданному направлению, изменяя свойства " top ", " z-index " и " opacity ". Давайте перейдем прямо к HTML-разметке, чтобы создать слайдер.

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

Разметка HTML очень проста. Она четко организована и благоприятна для SEO. Давайте сначала посмотрим полный код, а затем подробно выясним, как все работает.

div Это основной контейнер слайдера. У него нет определенной функции, но он нам нужен, чтобы приостановить анимацию.

div Мы будем использовать этот блок, чтобы скрыть всё, что происходит за пределами слайдера. В дополнение к этому, маска позволяет нам отображать содержание слайдера.

li У каждого элемента списка есть ID и класс. ID выводит на экран подсказку, а класс привязан к анимации, которая должна произойти.

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

div Этот блок содержит функцию, которая показывает прогресс выполнения анимации.

Теперь пришло время к формированию CSS-файла.

3. Стили CSS

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

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

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

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

4. CSS3-анимация по ключевым кадрам

Прежде, чем мы начнем с анимации, мы должны определить некоторые параметры, чтобы получить правильное представление анимации. Как мы знаем, полная продолжительность анимации составит 25 секунд, но мы должны знать, сколько будет ключевых кадров в 1 секунде. Давайте решим ряд операций, который даст нам точное число ключевых кадров и полную продолжительность анимации. Вот вычисления: Определяем общее количество изображений, в слайдере: 5; Определяем продолжительность анимации для каждого изображения: 5 секунд; Определяем полную продолжительность анимации, умножая общее количество изображений на продолжительность каждого: 5 изображений × 5 секунд = 25 секунд; Вычисляем, сколько ключевых кадров (процентов) будет в одной секунде. Делим общее количество ключевых кадров на полную продолжительность анимации: 100%/25 = 4%, В одной секунде 4 ключевых кадров, или 1 секунда равна 4% от анимации.

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

Как только свойства анимации были присвоены, мы должны использовать ключевые кадры, чтобы привести анимацию в движение. Следуя этому принципу, мы можем соединить все анимации друг с другом, даже если они независимы друг от друга. Это и даст нам бесконечный цикл. Я добавил свойства " opacity " и " z-index ", чтобы сделать переход от одного изображения к следующему более привлекательным. Как видите в коде, у первой анимации больше ключевых кадров, чем у остальных. Причина этого состоит в том, что, когда слайдер запущен, первое изображение освобождает место для второго, но когда последнее изображение закончит свою анимацию, у первого изображения должны быть дополнительные ключевые кадры, чтобы не создавать прерываний между циклами анимации.

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

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

5. Индикатор выполнения

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

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

6. Всплывающая подсказка

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

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

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

7. CSS3-переходы

Мы увидели, как применить CSS3-переходы к элементам, теперь давайте сделаем их для подсказок. Если помните, мы добавили ID к каждому списку («first», «second», и т.д.), чтобы при наведении каждая подсказка была связана с отдельным изображением, при этом не появлялись все подсказки сразу.

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

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

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

Наконец, мы дошли до конца урока. Слайдер теперь готов на 100%! Посмотрите демонстрацию слайдера (Альтернативный источник). Она работает в Firefox 5+, Safari 4+ и Google Chrome, а также iPhone и iPad. Можете также загрузить архив (Альтернативный источник). Спасибо Massimo Righi за его изображения.

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

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

От переводчика: Если вы нашли какие-то ошибки перевода, прошу отписаться в личных сообщениях. Спасибо.

📎📎📎📎📎📎📎📎📎📎