1.letakan Script di bawah ini,tepat dibawah kode
<head>
<script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">http://jqueryjs.googlecode.com/files/jquery-1.3.2.js</a>"></script>
2.letakan juga script dibawah ini tepat diatas kode
</head>
<script src="http://apadewa.co.cc/jquery.easing.1.3.js" type="text/javascript"></script>
3.lalu,letakan kode dibawah ini tepat di atas kode
</body>
</body>
<div class="leftcurtain"><img src="http://buildinternet.com/live/curtains/images/frontcurtain.jpg"/></div>
<div class="rightcurtain"><img src="http://buildinternet.com/live/curtains/images/frontcurtain.jpg"/></div>
<img class="logo" src="http://i293.photobucket.com/albums/mm48/dhoony_bucket/w-1.gif"/>
<a class="rope" href="#"><img src="http://buildinternet.com/live/curtains/images/rope.png"/></a>
note:leftcurtain dan right curtain adalah alamat gambar yang akan dijadikan tirai pada blog kamu.ganti gambar tirai,dengan kreasi mu,atau copy paste gambar yg sudah saya sediakan..
nah,sekarang masukan CSS ini,di atas kode </style>
*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #4f3722 url('http://buildinternet.com/live/curtains/images/darkcurtain.jpg') repeat-x;
}
img{
border: none;
}
.leftcurtain{
width: 50%;
height: 495px;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 495px;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.logo{
margin: 0px auto;
margin-top: 150px;
}
.rope{
position: absolute;
top: -40px;
left: 70%;
z-index: 4;
}
saya membuat dua div kelas untuk dua tirai (. Leftcurtain dan. Rightcurtain) yang dikunci untuk ditunjuk sisi mereka. Ini dilakukan di CSS dengan menggunakan atas, kiri, dan posisi atribut.
Anda akan melihat bahwa kita ditentukan untuk masing-masing lebar tirai, 50% dan 51%. Lebar yang berbeda-beda adalah untuk mengkompensasi beberapa tepi berombak ketika tirai tertutup yang dapat menyebabkan unsur-unsur di bawahnya untuk puncak melalui. Untuk mengatasi hal ini kita membuat tirai kanan sedikit tumpang tindih yang kiri, dengan menggunakan z-indeks. Z-index ini nilai-nilai juga memastikan bahwa tirai tetap di atas segala sesuatu yang seharusnya di balik tirai.
Gambar tirai yang sebenarnya ditetapkan menjadi 100% lebar / tinggi sehingga divs tirai saat ini menyusut divs lebar gambar menjadi berkumpul, seperti mereka dalam kehidupan nyata.
The. Logo berisi apa yang saya ingin bersembunyi di balik tirai, Anda dapat menggantinya dengan apapun yang Anda inginkan.
Akhirnya. Tali hanya tempat tali grafik di atas segalanya dan menyembunyikan sebagian gambar dari layar sehingga kami dapat menyelesaikan "menarik tali" efek kemudian.
Anda akan melihat bahwa kita ditentukan untuk masing-masing lebar tirai, 50% dan 51%. Lebar yang berbeda-beda adalah untuk mengkompensasi beberapa tepi berombak ketika tirai tertutup yang dapat menyebabkan unsur-unsur di bawahnya untuk puncak melalui. Untuk mengatasi hal ini kita membuat tirai kanan sedikit tumpang tindih yang kiri, dengan menggunakan z-indeks. Z-index ini nilai-nilai juga memastikan bahwa tirai tetap di atas segala sesuatu yang seharusnya di balik tirai.
Gambar tirai yang sebenarnya ditetapkan menjadi 100% lebar / tinggi sehingga divs tirai saat ini menyusut divs lebar gambar menjadi berkumpul, seperti mereka dalam kehidupan nyata.
The. Logo berisi apa yang saya ingin bersembunyi di balik tirai, Anda dapat menggantinya dengan apapun yang Anda inginkan.
Akhirnya. Tali hanya tempat tali grafik di atas segalanya dan menyembunyikan sebagian gambar dari layar sehingga kami dapat menyelesaikan "menarik tali" efek kemudian.
langkah terakhir,anda masukan script dibawah ini, di Bawah kode </style>
<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".rope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px'},2000 );
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
SELAMAT MENCOBA!!!
