View Demo
Bagaimana cara memasangnya?saya juga saat pertama kali mencoba,kesulitan untuk menggunakanya.tapi setelah dicoba berkali2,akhirnya bisa juga…^^ huft…
okeh,langsung saja saya ajarkan caranya…,
tapi ada baiknya sebelum anda mencoba script ini,kamu
backup dahulu template anda..
tapi ada baiknya sebelum anda mencoba script ini,kamu
backup dahulu template anda..
1.letakan Script di bawah ini,tepat dibawah kode
2.letakan juga script dibawah ini tepat diatas kode
3.lalu,letakan kode dibawah ini tepat di atas kode
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
*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #4f3722 url('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
SELAMAT MENCOBA!!!
Sumber :: Blog Johanes
Comments
Post a Comment