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

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

 

Идея

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

Эффект легко получить с помощью 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);
}

Готово!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ICMr5tDQQQ4/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Анимированный фотобаннер | | 2012-06-19 11:58:40 | | Статьи Web-мастеру | | В данном уроке мы разберемся с задачей создания анимированного фотобаннера, который бесконечно прокручивает в горизонтальной плоскости изображения. Дополнительное условие: не использовать JavaScript. | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: