Делаем эффект загибания уголка страницы — jQuery и CSS

effect_ugolka

Вы наверное наблюдали такой эффект — у сайта, который Вы просматриваете, как-будто отогнут верхний уголок, и при наведении мышки он отгибается сильнее и Вам открывается некая информация (обычно это баннер). Демонстрацию такого эффекта Вы можете наблюдать на этом сайте (справа сверху).

Так вот, здесь я расскажу, как достигнуть этого с помощью javascript (библиотека jQuery) и таблицы стилей (css), без использования flash и тому подобных инструментов.

Для начала в теле своей страницы прописываем блок, который и будет открываться в виде уголка:

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span>Subscribe via RSS</span>
	</a>
</div>

Где page_flip.png — картинка, которая будет открываться и Subscribe via RSS — текст к этой картинке.

В вашем файле css описываем стили для этого блока:

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top;
	text-indent: -9999px;
}

Теперь пропишем саму анимацию между тегами <head> и </head>:

?View Code JAVASCRIPT
<script type="text/javascript">
$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ //Animate and expand the image and the msg_block (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //On hover out, go back to original size 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //On hover out, go back to original size 50x50
		.animate({
			width: '50px',
			height: '50px'
		}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});
</script>

И не забываем, что перед этим javascript’ом должна быть подключена библиотека jquery, например так:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *