Показать Меню
falbar Анимация занавеса

Анимация занавеса. Hover Effects

Анимация занавеса

Всем привет! Сегодня поговорим об «украшательствах» и рассмотрим довольно интересную анимацию при наведении на картинку (картинку беру как пример, в реальности эффект можно использовать на чем угодно), а также познакомимся с библиотекой 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, поясню, что здесь происходит. Для того, чтобы достичь желаемый эффект, а именно раздвижение картинки при наведении в разные стороны, у нас есть два дива div.divLeft и div.divRight в свойствах которых указана одна и та же картинка. При наведении div.divLeft двигается на -70px влево, div.divRight на 80px вправо. Когда убираем курсор с картинки, всё возвращается на исходные позиции.

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

Источник
www.nitinh.com

Подписаться на обновления

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