Галерея изображений в стиле картотеки ролодекс

Картотека ролодекс достаточно долгое время (с 50-х  до середины 80-х прошлого века) была популярным атрибутом рабочего пространства. Удобная конструкция размещения карточек на барабане обеспечивала быстрый доступ к нужной информации. Сделаем галерею изображений в стиле популярного офисного прибора.

Вместо колеса прокрутки воспользуемся элементом HTML5 range для переключения между изображениями. Так как элемент не поддерживается в FireFox то  для него формируем замещение.

JavaScript (в форме jQuery) используется для связывания элемента управления с изображениями, но весь код умещается в несколько строк.

Содержание галереи представляет собой серию изображений одинакового размера в элементах <figure> с отдельным описанием а элементах <figcaption>:

		<div id=imgdex>
			<figure>
				<img src="/assets/img/arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress">
				<figcaption>Bedouin</figcaption>
			</figure>
			<figure>
				<img src="/assets/img/blue-green-eyes.jpg" alt="Photograph of a man's blue-green-eyes">
				<figcaption>Blue-green</figcaption>
			</figure>
			<figure>
				<img src="/assets/img/fake-eyelashes.jpg" alt="Photograph of dramatic fake eyelashes in closeup">
				<figcaption>Dramatic Fake</figcaption>
			</figure>
				<figure class=rolodex>
				<img src="/assets/img/snow-queen.jpg" alt="Photograph of a girl in heavy snow">
				<figcaption>Snow</figcaption>
			</figure>
		</div>

CSS код без префиксов браузеров:

div#imgdex{
	position:relative;
	perspective:4000px;
	width:70%;
	margin: 0 auto;
	transform-style:preserve-3d;
	font-family:Calibri;
}

div#imgdex figure{
	position:absolute;
	top:0;
	left:120px;
	transform-origin:left bottom;
	transform:rotateX(-92.1deg);
	transition:1s transform ease-in-out;
	width:70%;
}

div#imgdex figure img{
	max-width:100%;
}

div#imgdex figure figcaption{
	position:absolute;
	bottom:0;
	font-size:1.2rem;
	left:-8rem;
	opacity:0;
	transition:1s opacity ease-in-out;
}

div#imgdex figure:last-of-type{
	transform:rotateX(5deg);
	box-shadow:0px 0px 200px rgba(0,0,0,0.5);
}

Элемент div использует перспективу для манипулирования изображениями. Основные элементы figure вращаются вокруг нижней грани, становясь почти плоскими. 

Ниже элемента  div располагается элемент range:

<input type="range" min="1" onchange="updateImage(this.value);" value="4" id="ranger"/>

Элемент имеет минимальное значение  1 (в галерее должно быть хотя бы одно изображение). Когда слайдер перемещается, элемент вызывает функцию upDateImage и передает ей текущее значение.

function updateImage(val) {
$('#imgdex figure:nth-child('+val+')').css('-webkit-transform','rotateX('+val+'deg)');
      $('#imgdex figure:nth-child('+val+')').css('transform','rotateX('+val+'deg)');
      $('#imgdex figure:nth-child('+val+') figcaption').css('opacity','1');
      $('#imgdex figure:not(:nth-child('+val+')) figcaption').css('opacity','0');
      $('#imgdex figure:nth-child('+(val-1)+')').css('-webkit-transform','rotateX(-92.'+(count - val)+'deg)');
      $('#imgdex figure:nth-child('+(val-1)+')').css('transform','rotateX(-92.'+(count - val)+'deg)');
}


Код достаточно запутанный. Важно помнить,  что значение val всегда соответствует порядку изображений. Например, значение 4 указывает на последнее изображение в примере.

Если слайдер range перемещается в положение 3, то изображение 3 поворачивается до значения угла 3 градуса. Изображения поворачиваются с небольшим разбросом, чтобы создавать иллюзию объема.

Как только изображение повернется соответствующая подпись figcaption становится видимой, за счет изменения свойства opacity, а остальные подписи скрываются.

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

		<script>
			var count = $("#imgdex figure").length;
			$('#ranger').attr('max', count);
			$('#ranger').attr('value', count);
		</script>

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

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

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



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

Галерея изображений в стиле картотеки ролодекс | | 2013-02-22 02:39:10 | | Статьи Web-мастеру | | Картотека ролодекс достаточно долгое время (с 50-х  до середины 80-х прошлого века) была популярным атрибутом рабочего пространства. Удобная конструкция размещения карточек на барабане обеспечивала | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: