Membuat Efek Gambar Membelah dengan CSS dan JQuery

Dalam tutorial kali ini kita akan coba membuat efek pe-
misahan gambar membelah jadi dua. Seperti apa sih ?
Ini semacam efek pintu bergeser, dimana slide gambar
bergeser ke sisi kiri dan sisi kanan sehingga membuat
teks yang berada di belakangnya terlihat. Satu hal
yang sangat penting dari efek ini adalah dengan hanya
menggunakan 1 (satu) gambar saja. Ada 2 (dua)
model untuk efek ini yang bisa anda pilih.

Lihat demonya di sini.

Apakah anda ingin membuatnya ? Berikut ini caranya :

1.   Rancangan -> Tambah Gadget ->
      Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode yang tertera di bawah ini :

KODE MODEL 1 ( SATU ) :

<style type='text/css'> .box_container{ position:relative; /* important */ width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */ height:220px; /* important */ overflow:hidden; /* hide the content that goes out of the div */ /*just styling bellow*/ background: black; color:white; } .images_holder{ position:absolute; /* this is important, so the div is positioned on top of the text */ } .image_div { position:relative; /* important so we can work with the left or right indent */ overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */ width:50%; /* make it 50% of the whole images_holder */ float:left; /* make then inline */ } .right img{ margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */ } .clear{ clear:both; } /* FOR EASING EFFECT - NOT NEEDED*/ .box_container2{ position:relative; /* important */ width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */ height:220px; /* important */ overflow:hidden; /* hide the content that goes out of the div */ /*just styling bellow*/ background: black; color:white; } .images_holder2{ position:absolute; /* this is important, so the div is positioned on top of the text */ } .image_div2 { position:relative; /* important so we can work with the left or right indent */ overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */ width:50%; /* make it 50% of the whole images_holder */ float:left; /* make then inline */ } .right2 img{ margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */ } </style><br /> <script type='text/javascript' src='http://h1.ripway.com/syamsudin/splitting-effect.js'></script><br /> <script type='text/javascript' src='http://h1.ripway.com/syamsudin/easing.js'></script><br /> <script type='text/javascript'> $(document).ready(function() { //when the user hovers over the div that contains our html... $('.box_container').hover(function(){ //... we get the width of the div and split it by 2 ... var width = $(this).outerWidth() / 2; /*... and using that width we move the left "part" of the image to left and right "part" to right by changing it's indent from left side or right side... */ $(this).find('.left').animate({ right : width },{queue:false,duration:300}); $(this).find('.right').animate({ left : width },{queue:false,duration:300}); }, function(){ //... and when he hovers out we get the images back to their's starting position using the same function... ' $(this).find('.left').animate({ right : 0 },{queue:false,duration:300}); $(this).find('.right').animate({ left : 0 },{queue:false,duration:300}); //... close it and that's it }); //FOR EASING EFFECT - NOT NEEDED $('.box_container2').hover(function(){ var width = $(this).outerWidth() / 2; $(this).find('.left2').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:1000}); $(this).find('.right2').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:1000}); }, function(){ $(this).find('.left2').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:1000}); $(this).find('.right2').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:1000}); }); }); </script><br /> <br /> <br /> <br /> <!--START THE MAIN CONTAINER--><br /> <div class='box_container'> <br /> <!--START THE IMAGE PARTS HOLDER--><br /> <div class='images_holder'> <br /> <!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION--><br /> <div class='image_div left'><img class='box_image' src='http://web.enavu.com/demos/dual_sliding_door/img.jpg'/></div><div class='image_div right'><img class='box_image' src='http://web.enavu.com/demos/dual_sliding_door/img.jpg'/></div> <br /> <!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW--><br /> <div class='clear'></div> <br /> </div><br /> <!--END THE IMAGE PARTS HOLDER--><br /> <br /> <!--START THE TEXT--><br /> TULISAN DI SINI<br /> <!--END THE TEXT--><br /> </div><!--END THE MAIN CONTAINER-->

KODE MODEL 2 ( DUA ) :

<style type='text/css'> .box_container{ position:relative; /* important */ width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */ height:220px; /* important */ overflow:hidden; /* hide the content that goes out of the div */ /*just styling bellow*/ background: black; color:white; } .images_holder{ position:absolute; /* this is important, so the div is positioned on top of the text */ } .image_div { position:relative; /* important so we can work with the left or right indent */ overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */ width:50%; /* make it 50% of the whole images_holder */ float:left; /* make then inline */ } .right img{ margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */ } .clear{ clear:both; } /* FOR EASING EFFECT - NOT NEEDED*/ .box_container2{ position:relative; /* important */ width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */ height:220px; /* important */ overflow:hidden; /* hide the content that goes out of the div */ /*just styling bellow*/ background: black; color:white; } .images_holder2{ position:absolute; /* this is important, so the div is positioned on top of the text */ } .image_div2 { position:relative; /* important so we can work with the left or right indent */ overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */ width:50%; /* make it 50% of the whole images_holder */ float:left; /* make then inline */ } .right2 img{ margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */ } </style><br /> <script type='text/javascript' src='http://h1.ripway.com/syamsudin/splitting-effect.js'></script><br /> <script type='text/javascript' src='http://h1.ripway.com/syamsudin/easing.js'></script><br /> <script type='text/javascript'> $(document).ready(function() { //when the user hovers over the div that contains our html... $('.box_container').hover(function(){ //... we get the width of the div and split it by 2 ... var width = $(this).outerWidth() / 2; /*... and using that width we move the left "part" of the image to left and right "part" to right by changing it's indent from left side or right side... */ $(this).find('.left').animate({ right : width },{queue:false,duration:300}); $(this).find('.right').animate({ left : width },{queue:false,duration:300}); }, function(){ //... and when he hovers out we get the images back to their's starting position using the same function... ' $(this).find('.left').animate({ right : 0 },{queue:false,duration:300}); $(this).find('.right').animate({ left : 0 },{queue:false,duration:300}); //... close it and that's it }); //FOR EASING EFFECT - NOT NEEDED $('.box_container2').hover(function(){ var width = $(this).outerWidth() / 2; $(this).find('.left2').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:1000}); $(this).find('.right2').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:1000}); }, function(){ $(this).find('.left2').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:1000}); $(this).find('.right2').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:1000}); }); }); </script><br /> <br /> <!--END THE MAIN CONTAINER--> <br /> <br /> <!-- WITH NICE EFFECT --><br /> <div class='box_container2'><div class='images_holder2'><div class='image_div2 left2'><img class='box_image2' src='http://web.enavu.com/demos/dual_sliding_door/img.jpg'/></div><br /> <div class='image_div2 right2'><img class='box_image2' src='http://web.enavu.com/demos/dual_sliding_door/img.jpg'/></div><div class='clear'></div></div>TULISAN DI SINI<br /> </div>

KETERANGAN =

Ganti gambar img.jpg-nya dengan
gambar yang anda miliki.

Sesuaikan ukuran width: & height: nya
dengan gambar anda tersebut.

(ada 2 width: & height: yang harus diubah)

Masukkan kalimat atau tulisan anda yang
akan menjadi latar belakangnya
pada kode TULISAN DI SINI

Sesuaikan juga warna background dan warna
tulisannya pada kode background: & color:

(ada 2 tempat yang harus diubah)

Selamat mencoba, good luck!