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

 

Замысел работы наших блоков состоит вот в чем, что вся анимация в данном эффекте является трансформацией CSS3. JavaScript используется только для обработки события click и устанавливает/удаляет соответствующие классы. Почему не использовался JavaScript для анимаций, чтобы получить поддержку в более широком списке браузеров? CSS3 лучше подходит для решения таких задач.

 Для начала нам необходимо создать HTML-разметку. Каждый блок имеет подзаголовок, который виден только в неактивном состоянии блока, и еще один элемент div, который содержит все, что выводится в активном состоянии.

</pre>
<div id="page-wrap">
<div id="rotator">
<div id="block-1" class="active">
<h2>ГЛАВНАЯ СТРАНИЦА</h2>
<div><img src="spacefrog.jpg" alt="space frog" /></div>
</div>
<div id="block-2" class="non-active-top">
<h2>ОПИСАНИЕ САЙТА</h2>
<div><img src="goblins.jpg" alt="goblins" /></div>
</div>
<div id="block-3" class="non-active-bottom">
<h2>СОГЛАШЕНИЕ САЙТА</h2>
<div>
<h1>СОГЛАШЕНИЕ САЙТА RUDEBOX!</h1>
описание</div>
</div>
</div>
</div>
<pre>

Затем стилизуем контейнер и текст который будет находится в данных блоках с помощью CSS:

#rotator { width: 920px; height: 280px; position: relative; background: url(1.jpg); padding: 20px; }

Затем определяем для плавающих блоков позиционирование и размер:

#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
#rotator .non-active-top { top: 20px; left: 620px; height: 130px; width: 320px; }
#rotator .non-active-bottom { top: 170px; left: 620px; height: 130px; width: 320px; }
#rotator .non-active-top:hover, #rotator .non-active-bottom:hover {
			cursor: pointer;
			-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
			-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
			box-shadow: 0 0 10px rgba(0,0,0,0.4);

Каждый блок имеет общие свойства, обрезку выступающего контента, абсолютное позиционирование, и одинаковую скорость анимации:

#rotator > div {
			position: absolute;
			overflow: hidden;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
		}
		#rotator > div > div {
			padding: 0px;
		}
		#rotator > div > div img {
			float: right;
		}

В демо представлены блоки с различными градиентными заливками, делаем это следующим образом:

#block-1 { background: url(3.jpg); }
#block-2 { background: url(4.jpg); }
#block-3 { background: url(5.jpg); }

Теперь заставляем наши блоки скользить с помощью jQuery, мы сделали функцию rotate, которая устанавливает соответствующие классы блокам в зависимости от текущего значения current.

var current;
function rotate() {
	if (current == 1) {
		$("#block-1").removeClass().addClass("active");
		$("#block-2").removeClass().addClass("non-active-top");
		$("#block-3").removeClass().addClass("non-active-bottom");
	} else if (current == 2) {
		$("#block-1").removeClass().addClass("non-active-bottom");
		$("#block-2").removeClass().addClass("active");
		$("#block-3").removeClass().addClass("non-active-top");
	} else {
		$("#block-1").removeClass().addClass("non-active-top");
		$("#block-2").removeClass().addClass("non-active-bottom");
		$("#block-3").removeClass().addClass("active");
	}
}

Затем нам необходимо чтобы блоки возвращались на обратную позицию, для этого мы устанавливаем обработчик события click для каждого блока. Когда происходит нажатие, мы определяем с помощью ID номер блока и устанавливаем значение current, а затем вызываем функцию rotate.

$("#rotator div").click(function() {

	current = this.id.substr(6);
	rotate();

});

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

Читайте также: