Анимированный фотобаннер

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

demosourse

 

Идея

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

Концепция идеи

Эффект легко получить с помощью JavaScript или Flash, наша задача состоит именно в том, чтобы обойтись только CSS.

 

Простой способ

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

Изображения в         качестве длинного фона

Отлично работает и просто реализуется. Но, к сожалению, такое решение будет очень ограниченным. Нельзя получить доступ к отдельному изображению (например, чтобы реализовать эффект выделения). И при изменении коллекции придется снова браться за  Photoshop для обновления фона.

 

Сложный способ

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

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

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

Чтобы понять, как будет работать решение, представьте строку из изображений. Затем анимируем ее. Стартовая точка - 0%, точка остановки - 100%:

Принцип         использования кадров анимации

Если оставить решение в таком виде, то оно будет ужасным. Остается много пустого пространства. К тому же переход от финиша к старту будет сопровождаться ужасным рывком картинки. Б-р-р-р! Но будет непрерывная анимация.

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

Правлиный ход         решения

К сожалению, платой за решение будет повторение некоторых изображений в разметке HTML.

 

Разметка HTML

Для формирования страницы вставляем раздел header, некоторый текст и элемент div, который содержит наши изображения. Обратите внимание, что у нас используется 6 уникальных изображений, но первые 4 повторяются. При прокрутке последовательности хотя бы часть первых 4 изображений будет повторяться на разных кадрах.

<div id="container">
    <header>
	    <h1>Анимированный фотобаннер</h1>
	    <p>Lorem ipsum dolor...</p>
    </header>
 
    <!-- Каждое изображение имеет размер 350px Х 233px -->
    <div class="photobanner">
    	<img class="first" src="image-1.jpg" alt="" />
    	<img src="image-2.jpg" alt="" />
    	<img src="image-3.jpg" alt="" />
    	<img src="image-4.jpg" alt="" />
    	<img src="image-5.jpg" alt="" />
    	<img src="image-6.jpg" alt="" />
    	<img src="image-1.jpg" alt="" />
    	<img src="image-2.jpg" alt="" />
    	<img src="image-3.jpg" alt="" />
    	<img src="image-4.jpg" alt="" />
    </div>
</div>

Зачем нужен класс “first”, который ломает всю семантику? Чтобы запустить анимацию необходимо указать первое изображение и переместить его влево (остальные последуют за ним). Такую задачку легко решить с помощью псевдо-элемента first-child, но указание псевдо-классов или псевдо-элементов для анимации в настоящий момент очень плохо поддерживается. Поэтому приходится использовать старый проверенный способ.

 

CSS

Код CSS начинается со сброса полей/отступов. Затем добавляем фон с текстурой и задаем стили для контейнера, устанавливая для него ширину 1000px и правило скрытия всего выступающего за рамки:

* {margin: 0; padding: 0;}
 
body {
	<!-- src: http://subtlepatterns.com/?p=1045 -->
	background: url('dark_geometric.png');
}
 
#container {
	width: 1000px;
	overflow: hidden;
	margin: 50px auto;
	background: white;
}

Затем определяем стили для заголовка и фотобаннера. Для заголовка устанавливаем ширину 800px, чтобы он не растягивался на всю ширину контейнера. Также центрируем его и задаем стили для текста.

Для фотобаннера устанавливаем высоту 233px и ширину 3550px. Так все изображения размещаются от края до края, а контейнер будет обрезать все лишнее.

/*Заголовок*/
header {
	width: 800px;
	margin: 40px auto;
}

header h1 {
	text-align: center;
	font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}

header p {
	font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
	text-align: justify;
}

/*Фотобаннер*/

.photobanner {
	height: 233px;
	width: 3550px;
	margin-bottom: 80px;
}

Теперь внешний вид нашего баннера сформирован и пришла пора заняться анимацией.

Процесс определения кадров достаточно прост. Сначала нужно взять класс “first” и определить анимацию. Здесь указывается имя анимации, устанавливается длительность и параметр повтора (в нашем случае - бесконечный повтор).

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

/*Кадры анимации*/
.first {
	-webkit-animation: bannermove 30s linear infinite;
	   -moz-animation: bannermove 30s linear infinite;
	    -ms-animation: bannermove 30s linear infinite;
	     -o-animation: bannermove 30s linear infinite;
	        animation: bannermove 30s linear infinite;
}
 
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2125px;
 }
 
}
 
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}

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

Теперь расширим функционал. При наведении курсора на изображение будем увеличивать его на 20% и добавлять тень:

.photobanner {
	height: 233px;
	width: 3550px;
	margin-bottom: 80px;
}
 
.photobanner img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
 
.photobanner img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
 
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: designshack.net/articles/css/infinitephotobanner/
Перевел: Сергей Фастунов
Урок создан: 7 Апреля 2012
Просмотров: 33845
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^