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

25 февраля 2015 Антон Кулешов 2199 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
Читайте далее

WooCommerce title

28 мая 2016 Антон Кулешов

Совсем недавно я добавил статью, в которой рассмотрел написанный мною WordPress плагин для добавления и изменяя важных для страницы тегов: title, description и keywords. На момент написания этого поста плагин набрал уже более 100 установок, хотя я его нигде не рекламировал. Я решил продолжить эту тему, так как у меня было пару свободных вечеров и возможность поработать с интернет магазином на WooCommerce, то для него я решил сделать такой же вариант.

Adipoli – красивое представление ваших изображений

1 апреля 2015 Антон Кулешов

Продолжаем «наводить красоту» на наших сайтах, и сегодня поговорим о плагине под названием adipoli, при помощи которого можно создавать красивые hover effects.

Перенаправление пользователя при помощи HTML

24 ноября 2014 Антон Кулешов

Если вам потребуется перенаправить пользователя на другую страницу или просто перезагрузить её, то наиболее простым способом будет воспользоваться мета тегом refresh.