Tasarımlarımızda bazı reklam uygulamalarını ya da dikkat çekmek istediğimiz noktaları farklı tasarımsal öğeler kullanarak ifade edebiliyoruz ancak bunları yapmanın son zamanlardaki pratik yollarından bir çoğu bir jquery uygulaması olarak geliyor.

Biz de bu örneğimizde bir jquery uygulaması kullanarak "Page Peel" (Kıvrılan Sayfa) örneği gerçekleştireceğiz.Geçtiğimiz günlerde bir uygulamam için ihtiyaç duyduğum yabancı bir kaynaktan yararlandığım örneği sizlerle paylaşıyorum.

Demo adresini buradan görebilirsiniz.

HTML yapısı içerisinde aşağıdaki yapıyı ekleyiniz.

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

CSS yapısı olarak ise aşağıdaki yapıyı ekleyeniz.

#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;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top;
	text-indent: -9999px;
}

Gelelim son adım Jquery uygulamamıza,

$("#pageflip").hover(function() { 
	$("#pageflip img , .msg_block").stop()
		.animate({ 
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() 
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() 
		.animate({
			width: '50px',
			height: '50px'
$("#pageflip").hover(function() { 
	$("#pageflip img , .msg_block").stop()
		.animate({ 
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() 
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() 
		.animate({
			width: '50px',
			height: '50px'
		}, 200); 
});		}, 200); 
});

Not:Jquery javascript dosyamızı örneğimize eklemeyi unutmayınız.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

Örneğimizin demosunu buradan inceleyebilirsiniz. 
Gerekli resim vb. dosyalara belirttiğim demo sayfasındaki uygulama örneğinden erişebilirsiniz.

Kolay Gelsin ...