Хотите создать действительно уникальный и привлекательный эффект для вашего сайта? Как насчет анимации масштабирования в определенной части страницы при нажатии на нее?

С jQuery и Zoomooz.js, это проще простого!

Пример

Введение в Zoomooz.js

При работе с новыми библиотеками лучше начинать с простых примеров. Только так можно почувствовать, как все работает. С помощью этого проекта мы создадим основную страницу, чтобы проверить масштабирование, а затем перейдем на более практичный пример, создав галерею миниатюр.

Для работы нам нужно скачать библиотеки zoomooz


	Zooming Test
	
	 
	
	
	
	

JavaScript

Затем копируете и вставляете скрипт в Ваш HTML. Как можно видеть, при клике по элементу с классом .zoom мы применяем к нему метод zoomTo(). Чтобы вернуться обратно на страницу мы применяем этот же метод за пределами выбранного элемента (к элементу body).

$(document).ready(function() {
	$(".zoom").click(function(evt) {
		evt.stopPropagation();
		$(this).zoomTo();
	});
	$(window).click(function(evt) {
		evt.stopPropagation();
		$("body").zoomTo();
	});
	$("body").zoomTo();
});

HTML

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


	

CSS

#container {
	width: 800px;
	height: 500px;
	margin: 0 auto;
}
 
#outer {
	width: 400px;
	height: 200px;
	background: #aaa;
	margin: 50px auto;
	padding: 70px;
}
 
#inner {
	width: 400px;
	height: 200px;
	background: #eee;
	margin: 0 auto;
	position: absolute;
}

#inner p {
	text-align: center;
	font: 25px/200px Helvetica, sans-serif;
}
 
#inner p a {
	color: #000;
	text-decoration: none;
}
 
#inner p a:hover {
	text-decoration: underline;
}

Мы должны получить следующий результат

Создание галереи

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

HTML


 
	

Zoom Gallery

Click on an image below to zoom into it, then click outside to zoom out. Pretty neat eh?

CSS

* {
	margin: 0;
	padding: 0;
}
 
/*Text Styles*/
 
#headline {
	text-align: center;
	margin: 20px 0;
}
 
h1 {
	font-family: 'Arvo', Georgia, Times, serif;
	font-size: 50px;
	line-height: 65px;
}
 
p {
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 25px;
}

/*Gallery Styles*/
 
#gallery {
	width: 720px;
	height: 370px;
	margin: 0 auto;
	padding: 10px;
	background: #383131;
}

/*List Styles*/
ul {
	list-style-type: none;
	position: absolute;
	width: 720px;
}
 
#gallery ul li {
	float: left;
	margin: 10px;
	background: white;
	height: 100px;
	width: 100px;
}
 
#gallery ul li:hover {
	border: 3px solid white;
	margin: 7px;
}
 
#gallery ul li img{
	height: 100px;
	width: 100px;
}

У нас должна получиться вот такая галерея