ПР02. Анимация объекта с использованием CSS3

Ваша задача

Создать анимированный слайдер на пять слайдов. Размер слайдера не должен привышать 1024*768px.

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

Запрещено использовать готовые шаблоны слайдеров.

Ниже будет разобрано как создать слайдер.

Слайдер на CSS3

Сегодня мы с Вами попробуем сделать слайдер на CSS3. Еще несколько лет назад такое было попросту невозможно, сегодня же это можно сделать абсолютно без помощи javascript. В общем, приступим.

Исходный материал

В качестве рабочих изображений для примеров будут использованы картинки из папки img/, а именно: loko.png, mag.png, ska.png, su.png, tor.png, tra.png

Размер каждого изображения 200*200px.

В своей работе вы можете использовать любые изображения.

Во всех примерах сдайдер будет состоять из трёх слайдов.

Разметка

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

	<article class="wrapSlider">
		...  
	</article>

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

Далее создаём три radiobutton и отмечаем одного из них как checked

		<input type="radio" name="Pointers" id="pnt1" checked>
		<input type="radio" name="Pointers" id="pnt2">
		<input type="radio" name="Pointers" id="pnt2">

Обратите внимание все radiobutton имеют одинаковое имя, но разные идентификаторы.

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

	<div class="listSlides">
		<div class="slides img1"></div>
		<div class="slides img2"></div>
		<div class="slides img2"></div>
	</div>

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

С помощью атрибута for связываем каждую подпись с одной из кнопок, это позволит нам красиво оформить их. Не сами радиокнопки, потому что на них, к сожалению, стили не действуют, а label. Связка позволяет сделать так, что при клике на подпись автоматически становится выбранной и radiobutton, что нам и нужно.

	<div class="ctrlPanel">
		<label class="pnt1"></label>
		<label class="pnt2"></label>
		<label class="pnt3"></label>
	</div>

В итоге получаем - читсую разметку с тремя radiobutton на странице.

Пример 1. Простой пример. Черновая разметка.

Примеры выполнения работы доступны как ввиде отедельных страниц(папака example/), так и ввиде блоков iframe на стороний ресурс(https://jsfiddle.net/). Блок iframe содержит три вкладки: HTML, CSS, Result. В котрых вы можете посмотреть разметку, стили и результат примера.

Добавление стилей

Создаём стиль для общего контейнера. Тут не должно быть сложностей.

	.wrapSlider {
		width: 400px;
		height: 250px;
		margin: auto;
		padding: 10px;
		text-align: center;
		border: thin solid #777;
		border-radius: 5px;
		box-shadow: 0px 5px 5px rgba(0,0,0, 0.5);
		position: relative;
	}

Следующим действием скрываем radiobutton. На странице сами radiobutton по большому счёту не нужны. Для дизайна нам больше подходят связаные с ними label. Для чего тогда radiobutton? Их главная ценность в том что мы можем узнать кто из них checked.

	.wrapSlider input {
		dispaly: none;
	}

Далее оформляем блок хранения слайдов и сами слайды. Все слайды по умолчанию скрыты, но если Вы хотите убетиться что они существуют, то закомментируйте строчку display: none и посмотрите что получиться.

	.listSlides {
		width: inherit;
		height: 220px;
		background-color: rgba(200,200,200, 0.2);	
		overflow: hidden;
		text-align: center;
	}

	.slides {
		width: inherit;
		height: inherit;
		display: none;	
	}

Сделаем лайблы в виде красивых точек.

	.ctrlPanel {
		width: inherit;
		height: 20px;
		position: absolute;	
		bottom: 10px;
	}

	.ctrlPanel label {
		width: 10px;
		height: 10px;
		display: inline-block;	
		border-radius:  50%;
		border: 2px solid #aaa;
		box-shadow: 0px 0px 2px rgba(0,0,0, 0.3);	
	}

Наш слайдер почти готов. Осталось самоего главное создать переключение слайдов.

Пример 2. Общий дизайн есть. Но нет переключения слайдов

Примеры выполнения работы доступны как ввиде отедельных страниц(папака example/), так и ввиде блоков iframe на стороний ресурс(https://jsfiddle.net/). Блок iframe содержит три вкладки: HTML, CSS, Result. В котрых вы можете посмотреть разметку, стили и результат примера.

"Оформление переключателя"

На данном этапе у нас фактически есть пустой(в том смысле, что он ничего не показывает) слайдер с тремя полыми точками. Для начала сделаем так чтобы они закрашивались при нажатии на них(не путайте с псевдоклассом :hover). 

	#pnt1:checked ~ .ctrlPanel label:nth-of-type(1),
	#pnt2:checked ~ .ctrlPanel label:nth-of-type(2),
	#pnt3:checked ~ .ctrlPanel label:nth-of-type(3) {
		background-color: rgba(200,30,40, 0.4);
	}

Данная запись трактуется следующим образом: если выбран(или по другому checked) #pnt1, то во всех последующих панелий упраления .ctrlPanel, а посколько она одна, то взять в ней первый элемент(:nth-of-type(1)) с типом label и применить к нему свойство background-color.

Аналогично запись трактуется и для #pnt2 и #pnt3.

Добавление переключателя слайдов происходит практически аналогично предыдущему примеру.

	#pnt1:checked ~ .listSlides > .img1 ,
	#pnt2:checked ~ .listSlides > .img2, 
	#pnt3:checked ~ .listSlides > .img3 {
		display: block;
	}

Если выбран #pnt1, то во всех последующих блоках хранения слайдов .listSlides, а посколько он один, то в нём ко всем прямым потомкам с классом .img1 применить свойство display: block.

Пример 3. Практически готовый слайдер

Примеры выполнения работы доступны как ввиде отедельных страниц(папака example/), так и ввиде блоков iframe на стороний ресурс(https://jsfiddle.net/). Блок iframe содержит три вкладки: HTML, CSS, Result. В котрых вы можете посмотреть разметку, стили и результат примера.

Добавление перехода

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

	.slides {
		.....
		transform: translate(150px, -50px) rotate(45deg);
		opacity: 0;
		transition: all .5s;
	}

	#pnt1:checked ~ .listSlides > .img1 ,
	#pnt2:checked ~ .listSlides > .img2, 
	#pnt3:checked ~ .listSlides > .img3 {
		transform: none;
		opacity: 1;
	}

Пример 4. Готовый слайдер.

Примеры выполнения работы доступны как ввиде отедельных страниц(папака example/), так и ввиде блоков iframe на стороний ресурс(https://jsfiddle.net/). Блок iframe содержит три вкладки: HTML, CSS, Result. В котрых вы можете посмотреть разметку, стили и результат примера.

Ещё один пример. Он похож на предыдущий, но в этом есть переходы.

Анимация

Теперь по сложнее и интереснее. Создание автоматического прехода слайдов. Для данной цели подойдёт свойство animation.

Из разметки можно удалить блок с панелью управления. Он нам больше не понадобиться.

ВНИМАНИЕ!! Не обязательно создавать анимированый слайдер. Это раздел больше как ознакомительный.

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

  1. Общее количество изображений в слайдере - 3
  2. Продолжительность анимации для каждого изображения - 5 секунд
  3. Общая продолжительность анимации - 3 изображений × 5 секунд = 15 секунд
  4. Подсчитаем сколько ключевых кадров равны одной секунде, для этого разделим общее количество ключевых кадров на общую продолжительность анимации: 100 ключ. кадров / 15 сек. = 6.666 ключ. кадра

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

	.img1 { animation: cycle1 15s linear infinite; }
	.img2 { animation: cycle2 15s linear infinite; }
	.img3 { animation: cycle3 15s linear infinite; }

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

	@keyframes cycle1 {
		0%    { opacity: 0.2; transform: scale(0.8);}
		6.6%  { opacity: 0.7; transform: scale(1); }
		13.2% { opacity: 1;   transform: scale(1); }
		19.8% { opacity: 1;   transform: scale(1); }
		26.4% { opacity: 1;   transform: scale(1); }
		33%   { opacity: 0.1; transform: scale(0.1);}
		39.6% { opacity: 0;   transform: scale(0); }
		46.2% { opacity: 0;   transform: scale(0); }
		52.8% { opacity: 0;   transform: scale(0); }
		59.4% { opacity: 0;   transform: scale(0); }
		66%   { opacity: 0;   transform: scale(0); }
		72.6% { opacity: 0;   transform: scale(0); }
		79.2% { opacity: 0;   transform: scale(0); }
		85.8% { opacity: 0;   transform: scale(0); }
		92.4% { opacity: 0;   transform: scale(0); }
		100%  { opacity: 0.2; transform: scale(0.8); }	
	}

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