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

Эффект

Наверное вы встречались с таким эффектом - в углу страницы (как правило, в верхнем правом) чуть заметен маленький треугольник с рекламным банером - такое впечатление, что загнулась страница журнала. Стоит потянуть за него или просто щелкнуть мышью, как рекламное сообщение полностью открывается. Этот эффект напоминает снятие кожицы с какого-нибудь фрукта. Этот эффект реализуется как правило на Adobe Flash. Автор этой работы попробовал сделать это с помощью JavaScript.

Посмотреть демо

1. HTML - каркас для страницы, с которой снимаем кожицу

Слой, который будет имитировать закручивание страницы выступает а качестве контейнера, относительно которого будет производиться позиционирование. Вложенное в него изображение обернуто анкором .

	
		
		Subscribe via RSS
	

2. CSS - стиль для страницы, с которой снимаем кожицу

Размеры изображения зададим небольшими (50×50) пикселей и установим для него абсолютное позиционирование и поставим это изображение в правый верхний угол. Изображение будет играть роль маски как это делается в Adobe Flash. Под ним будет находиться рекламное сообщение, поэтому будет виден только часть него, незамаскированная изображением.

Сообщение спрятано за краешком кожицы и все это принадлежит CSS классe “msg_block”.

#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;
}

3. jQuery - анимируем снятие кожицы

Все что осталось сделать - это заставить расширяться изображение и msg_block при движении по нему мыши и возврат в исходное состояние, если мышь выйдет за пределы этой части кожицы.

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ //анимируем и расширяем  msg_block (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //если покинули область - возвращаемся к размеру 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //если покинули область - возвращаемся к размеру  50x50
		.animate({
			width: '50px',
			height: '50px'
		}, 200);
});