Реклама
timeweb
falbar

Анимация занавеса, hover effects

13 февраля 2015 1713 0

Сегодня поговорим об «украшательствах» и рассмотрим довольно интересную анимацию при наведении на картинку (картинку беру как пример, в реальности эффект можно использовать на чем угодно), а также познакомимся с библиотекой MooTools.

Реклама

Суть анимации следующая: при наведении на изображение картинка делится на две части и раздвигается в стороны как занавес, открывая скрытую под ней информацию. В предыдущих статьях мы, в основном, использовали библиотеку jQuery, и не мудрено, ведь она самая распространенная, сегодня же я решил немного разнообразить тематику, и для реализации анимации мы будем использовать библиотеку MooTools.

Для начала подключим саму библиотеку MooTools:

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>

Теперь как всегда добавим на страницу HTML структуру:

<div class="thumb">
	<div class="someContent">
		<div class="content">
			Какой-то текст...
		</div>
	</div>
	<div class="divLeft" style="left: 0px">
		<div class="divLeftImage" style="background: url(7.jpg);"></div>
		<div class="divLeftShadow"></div>
	</div>
	<div class="divRight" style="left: 0px; background-image: url(7.jpg);"></div>
	<img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png">
</div>

Здесь у нас 3 основных блока: блок с контентом, в который кладем текст описания, или же другое изображение (как у кого с фантазией), и два блока с нашей картинкой, при помощи которых и будет реализован «занавес». Кроме того, используется несколько блоков для реализации красивых динамических теней при наведении.

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

div.thumb{
	position: relative;
	width: 160px;
	height: 160px;
	margin: 30px 40px;
	overflow: hidden;
	border: 5px solid #313131;
	float: left;
}
div.divLeft, div.divRight{
	width: 90px;
	height: 160px;
	overflow: hidden;
	position: relative;
	top: -160px;
	overflow: hidden;
	float: left;
}
div.divLeft{
	margin-right: -10px;
}
div.divLeftImage{
	width: 80px;
	height: 100%;
	float: left;
}
div.divLeftShadow{
	width: 10px;
	height: 100%;
	float: left;
	background: transparent url(shadow.png) repeat-y 0 0;
}
div.divRight{
	width: 80px;
	background-position: -80px 0;
}
.thumbnail-shadow{
	float: left;
	height: 33px;
	position: relative;
	top: -320px;
	width: 100%;
}
div.someContent{
	position: relative;
	width: 160px;
	height: 150px;
	padding: 10px 0px 0px;
	font-size: 12px;
	font-family: Arial;
	text-align: justify;
	background: transparent url(thumbnail-overlay.png) no-repeat scroll 0px -167px;

}
div.someContent div.content{
	color: #CCC;
	height: 126px;
	font-size: 11px;
	padding: 0 10px 0 20px;
}

Вот же сама реализация:

window.addEvent("domready", function(){

	$$("div.thumb").each(function(div){

		div.getElement("div.someContent").set("tween", {duration: "700"});
		div.getElement("div.divLeft").set("tween", {duration: "450"});
		div.getElement("div.divRight").set("tween", {duration: "450"});

		div.addEvent("mouseenter", function(e){
			this.getElement("div.divLeft").tween("left", "-70px");
			this.getElement("div.divRight").tween("left", "80px");
			this.getElement("div.someContent").tween("background-position", "-20px 0px");
		});

		div.addEvent("mouseleave", function(e){
			this.getElement("div.divLeft").tween("left", "0px");
			this.getElement("div.divRight").tween("left", "0px");
			this.getElement("div.someContent").tween("background-position", "0px -167px");
		});
	});
});

Для тех, кто незнаком с библиотекой MooTools, поясню, что здесь происходит. Для того, чтобы достичь желаемый эффект, а именно раздвижение картинки при наведении в разные стороны, у нас есть два дива divLeft и divRight в свойствах которых указана одна и та же картинка. При наведении divLeft двигается на -70px влево, divRight на 80px вправо. Когда убираем курсор с картинки, всё возвращается на исходные позиции.

Вот так просто можно создать интересный hover effect, воспользовавшись библиотекой MooTools.

Реклама
Комментариев еще не оставлено
no_avatar