arşiv

yazılar buna göre etiketlendi; ‘Page Peel’

Jquery ile Kıvrılan Sayfa (Page Peel) Örneği

Perşembe, 05 Kas 2009 1 yorum

Merhabalar

jQuery

jQuery

İlk çıktığı zamanlar pek sıcak bakmasamda son zamanlarda yazılım dünyasında hızla artan uygulama sayısıyla popüler olan jQuery’den yine muhteşem bir uygulama. Peki nedir bu jQuery;

jQuery, hem Javascript hem Ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. Açık kaynak bir framework olmasından dolayı üzerine bir çok eklenti yazılmış ve bu sayede de tüm dünyada kullanıcı kitlesi bir anda artmıştır.

Gelelim uygulamamıza; Hazırladığım bir projemde kullanmak üzere yabancı bir kaynaktan yararlandığım bu uygulamayı hem kendim test ederek hemde size küçük bir demo hazırlayarak paylaşmak istedim.

Hemen uygulamamıza geçelim.

Öncelikle HEAD etiketi arasına Jquery javascript kütüphanemizi ekliyoruz.

<script type="text/javascript" src="jquery-latest.js"></script>

Jquery kodumuzu ekliyoruz..

</pre>
<pre><script type="text/javascript">
$(document).ready(function(){

//Page Flip on hover

$("#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);
});

});
</script>

Son olarak eklememiz gereken CSS ise şöyle

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

Örnek ekran görüntüsü şöyle :

Örnek Page Peel görüntüsü

Evet bu kadar. Uygulamanın görsel öğelerine ve demosuna buraya tıklayarak indirebilirsiniz.

Demo ve Kaynak dosyaları için tıklayın!

Hepinizi İyi Çalışmalar ;)