Реклама
timeweb
falbar

Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали

25 февраля 2015 2442 0

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

Реклама

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

На примере текста на ветках хорошо показаны возможности этого скрипта и его особенность. Также можно поместить нужные блоки в контейнер и относительного его применять плагин (зумирование). Такой способ увеличения картинки наверняка привлечёт пользователя.

Теперь рассмотрим пример реализации материалов, прикрепленных к этой статье.

Подключаем скрипты:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.zoomooz.min.js" type="text/javascript"></script>

HTML:

<div id="container">
	<div id="content">
		<object class="tree" data="tree.svg" width="720" height="720" type="image/svg+xml" >
			<embed class="tree" src="tree.svg" width="720" height="720" type="image/svg+xml" />
		</object>
		<div class="label" id="label1">
			An apple does not fall far from the tree.
		</div>
		<div class="label" id="label2">
			Who reaches for the spruce, falls down onto the juniper.
		</div>
	</div>
</div>

В эту структуру входит обёртка, при клике по которой будет возвращаться исходное состояние id=container. У блоков с текстом добавлен class=label, по клику по нему скрипт будет создавать эффект приближения. Контейнер с id=content используется для отцентровки содержимого относительно окна браузера у пользователя.

CSS стили следующие:

#container{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: white;
}
#label1{
	left: 160px;
	top: 105px;
	width: 90px;
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
}
#label2{
	left: 460px;
	top: 285px;
	width: 150px;
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
}
div.label{
	padding: 10px;
	font-family: Helvetica Neue;
	font-size: 12px;
	line-height: 14px;
	position: absolute;
	color: #aaa;
	-webkit-user-select: none;
	-moz-user-select: none;
}
div.label:hover{
	color: #333;
	cursor: pointer;
	cursor: hand;
}
.tree{
	 pointer-events: none;
}
#content{
	position: relative;
	margin-top: 0;
	margin-left: auto;
	margin-right:auto;
	width: 750px;
}

Стили используются только для оформления и не влияют на работу скрипта, всё, что ему необходимо, он допишет сам. В частности, при помощи внутреннего CSS, текст развешивается как грозди на ветке.

JavaScript:

$(document).ready(function(){
	$("#container").click(function(evt){
		evt.stopPropagation();
		$(this).zoomTo({
			duration: 1000,
			targetsize: 1.0
		});
	});
	$(".label").click(function(evt){
		evt.stopPropagation();
		$(this).zoomTo({
			duration: 1000,
			targetsize: 0.6
		});
	});
});

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

Напоследок рассмотрим настройки нашего плагина зумирования. Отмечу, что использовать их просто и можно воспользоваться двумя вариантами: непосредственно передавать плагину параметры со значениями или дописывать атрибуты вида data-название_настройки в структуре HTML.

  • targetsize – указываем относительное увеличение размера (значения 0.0 - 1.0);
  • scalemode – указываем масштаб содержимого экрана в зависимости от размера (значения «width» | «height» | «both»);
  • duration – задаем продолжительность анимации в миллисекундах;
  • easing – задаем функцию смягчения анимации (значения «linear» | «ease» | «ease-in» | «ease-out» | «ease-in-out» | [p1, p2, p3, p4]);
  • nativeanimation – указываем браузеру использовать ли родную анимацию движка webkit (собственно актуально только для «гугл хром»);
  • root – указываем корневой элемент, по отношению к которому будет производится зумирование (Важно! Он должен быть отпозиционирован);
  • debug – включаем/отключаем отображение логов в консоли;
  • animationendcallback – указываем колбэк функцию;
  • preservescroll – запрещаем/разрешаем отмену зумирования при скроллинге.
Реклама
Комментариев еще не оставлено
no_avatar