Webmasters.BY

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

Изображения используемые в примерах Mark Sebastian-а, и они используются на условиях лицензии Creative Commons Attribution-ShareAlike 2.0 Generic License.

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

HTML-разметка

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

Span-ы будут содержать элементы, которые будут иметь фоновое изображение используемое в слайдшоу.

CSS

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

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

Тег span, который будет содержать изображения слайд-шоу, будет позиционироваться абсолютно и имеют ширину и высоту 100%. Поскольку у нас есть некоторый текст внутри, мы сделаем цвет прозрачным, поскольку мы не хотим его видеть сразу. Свойство background-size будет иметь значение "cover", для того чтобы фоновое изображение охватывало всю страницу, вне зависимости от размера экрана. Прозрачность установлена ​​равной 0. Затем мы изменим это в нашей анимации:

Анимация для каждого тега span длится 36 секунд и запускается неограниченное количество раз. Но давайте посмотрим на детали, во-первых, мы создадим стили для блока с заголовком:

Анимация для этого блока также будет длиться 36 секунд.

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

Теперь давайте посмотрим на анимацию слайдшоу. Каждый тег span будет иметь анимацию продолжительностью 36 секунд. За эти 36 секунд, сначала мы изменим непрозрачность от 0 до 1, это когда анимация проиграет 8% от своей продолжительности. Затем эта непрозрачность будет оставаться неизменной до 17% от времени продолжительности анимации. При достижении 25%, непрозрачность будет снова равна 0 и такой останется до самого конца.

Итак, почему именно эти значения? Мы хотим, чтобы каждое изображение было видимым в течение 6 секунд, затем в конце цикла, мы хотим, чтобы первое изображение показалось еще раз. У нас есть 6 изображений, поэтому нам нужно 36 секунд на весь цикл. Теперь нам нужно, чтобы "время" непрозрачности было соответствующее. Зная, что наш второй кадр анимации начнется через 6 секунд после начала анимации, мы должны знать, на каком проценте анимации потребуется убрать первое изображение. Разделив 6 на 36 мы получим 0,166 ..., это и будет шагом для кадров анимации равным 16%. Теперь, поскольку мы не хотим чтобы изображения просто исчезали все время, мы определим промежуточные шаги, которые мы установим на половину того, что мы рассчитали, то есть 8%. После этого мы сделаем, чтобы изображение начало исчезать на 17%, и полностью исчезло на 25%.

Мы хотим, чтобы название исчезло немного быстрее, поэтому прозрачность станет равной 0 на 19%:

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

Класса no-cssanimations добавляет Modernizr.

Давайте так же позаботимся о размере шрифта заголовка. Мы будем использовать media queries для того, чтобы установить размер шрифта меньше при определенной ширине экрана:

И это все, для простой версии слайдшоу! Теперь давайте посмотрим, как можно немного оживить переходы.

Альтернативный пример анимации

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

Следующая анимация немного увеличит масштаб изображения и немного его повернет:

Название будет скользить справа (мы должны изменить свойство text-align для названия на “right”), а затем исчезнет:

Есть множество вариантов для переходов изображений и их названий, это просто эксперимент!

Примеры

Здесь вы можете посмотреть несколько демо-примеров с альтернативной анимацией:

1. Пример 1: Simple Fade in, fade out
2. Пример 2: Slight rotation, title slides from the right
3. Пример 3: Image moves up, title moves down
4. Пример 4: Image scales, title moves up, scales and fades out

В настоящее время анимация плавная в Webkit-браузерах, таких как Chrome и Safari.

Я надеюсь, что вам понравился этот урок и вы найти его полезным и интересным!

Скачать исходники

Перевод статьи от Mary Lou с tympanus.net/codrops