Page Peel Efek Memakai Jquery & Css
Kalo tidak salah dulu aku pernah nulis tutorial wacana iklan bergaya Page Peel ya? coba buka arsip dulu...nah ketemu :) oh iya ternyata ada 2 tutorial berbeda yang pernah di publish, yang pertama untuk tampilan memakai style Page Ear Javascript, trus..sama ini yang kedua Sexy Curls jQuery Plugin. Nah, buat rekan yang rada absurd dengan istilah Page Peel, silahkan buka kembali arsip terdahulu pada kedua link diatas ya.
Ok lanjut, nah kali ini aku menemukan Page Peel terbaru buatan Sohtanaka.com dengan koding yang tentu saja sangat berbeda dengan kedua Page Peel diatas, Sohtanaka tidak memakai setup koding yang rumit, jadi rekan tinggal eksklusif memasangnya saja dihalaman blog. Walaupun masih ada sedikit yang harus diedit, itupun hanya sekedar mengubah tampilan gambar dan link tujuannya saja. Bila dilihat sekilas, untuk style tampilannya hampir sama saja, dimana dikala kita mengarahkan mouse pada area PagePeel ini, maka akan terlihat halaman menggulung layaknya anda membuka selembar kertas dan menemukan halaman lain dilembar sebaliknya. Lihat demonya disini.
Baca Juga
Cara Pasang:
Letakan script code jQuery dibawah ini diatas isyarat <b:skin><![CDATA[
<script src='http://code.jquery.com/jquery-latest.js' 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>
Kemudian letakan isyarat CSS dibawah ini diatas isyarat ]]></b:skin>
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#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;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}
Letakan isyarat ini dibawah tag <body>
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Silahkan disimpan dan lihat hasilnya. Ingat! Tampilan diatas hanya sebagai pola saja ya, rekan dapat mengganti gambar dan link tujuan apa saja sesuai keinginan. Silahkan eksklusif dicoba :)
Belum ada Komentar untuk "Page Peel Efek Memakai Jquery & Css"
Posting Komentar