Слайд-шоу фонового изображения с помощью CSS3 | RUDEBOXЭффекты реализованные с помощью css становятся все более популярными. Данный вариант разработки позволяет достичь удивительных эффектов для вашего сайта. В данном уроке мы рассмотрим несколько вариантов реализации полноэкранного слайд-шоу фонового изображения для сайта. Данный подход к реализации фонового изображения позволит креативно скрасить как портфолио сайта, так и обыденный сайт. Различные эффекты вращения, затухания и скольжения будут приятно радовать глаз посетителей. Давайте же посмотрим, что у нас получилось.

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

Шаг 1. HTML

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

На свое усмотрение вы можете добавить большее количество изображений.

Слайд-шоу фонового изображения с помощью CSS3 | RUDEBOX

Шаг 2. СSS

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

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

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

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

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

Обратите внимание, что у нас используется всего шесть изображений, итого потребуется 36 секунд. Теперь нам нужно задать соответствующие значения по времени для прозрачности. Зная тот факт, что вторая картинка анимации начнется через 6 секунд нам нужно знать какой процент анимации должен быть для показа первой картинки. Разделим 6 на 36 и получим 0.166… что будет 16% для нашего шага параметра keyframe.

Теперь нам необходимо применить схожие расчеты и для анимации заголовка, единственное что мы изменим, дабы он немного быстрее исчезал, поэтому прозрачность = 0 на 19%.

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

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

Вот и все. Готово!

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