Cara Memnuat Gambar Terbelah Ketika Disorot Mose

Hai Sobat blogger semua,kali ini saya akan ngebahas tentang postingan yang kurang kerjaan tapi membuat pengunjung merasa senang. Tutorial ini disebut juga animasi yang disebut queue yaitu image atau objek akan bergerak seperti terbelah jika mouse diarahkan pada gambar tersebut atau akan terbuka dan tertutup gambar tersebut. Bagi anda yang ingin mencobanya silahkan ikuti tutorialnya:
Pertama kita uplod terlebih dahulu 2 gambar yang akan kita jadikan bahannya.kemudian ambil link dari kedua gambar tadi.kemudian masukan link gambar tersebut kedalam scrip dibawah ini.
seperti blog ini saya menggunakan gambar saya sendiri:

Gambar pertama:

Gambar Kedua

Kemudian silahkan copy kode css dibawah ini dan pastekan dalam postingan anda di posisi HTML.

Label Spoiler :

<style type="text/css">.box_container{margin-left:150px;position:relative;width:620px;height:350px;overflow:hidden;color:white;}.images_holder{position:absolute;}.image_div {position:relative;overflow:hidden;width:50%;float:left;}.kiri{}.kanan img{margin-left: -100%;}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function() {$('.box_container').hover(function(){var width = $(this).outerWidth() / 2;$(this).find('.kiri').animate({ right : width},{queue:false,duration:1000});$(this).find('.kanan').animate({left : width },{queue:false,duration:1000});},function(){$(this).find('.kiri').animate({right:0 },{queue:false,duration:1000});$(this).find('.kanan').animate({left:0 },{queue:false,duration:1000});});});</script>
<br />
<div class="box_container">
<div class="images_holder">
<div class="image_div kiri">
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-sepz957DuQ-Pn1arvSFXF2wBPtMc6VjXSfB00EloVBw8aOd1jtIZJeHnB_P3v1xOoy9jykd6g6YhUYh_0egv7hwhhEhEkbM3MAGSudWkfAFPRHcK5VOss-JkHtcsoXyAUlsnQVXR8oQ1/s1600/Untitled-2.jpg" style="width: 420px;" /></div>
<div class="image_div kanan">
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-sepz957DuQ-Pn1arvSFXF2wBPtMc6VjXSfB00EloVBw8aOd1jtIZJeHnB_P3v1xOoy9jykd6g6YhUYh_0egv7hwhhEhEkbM3MAGSudWkfAFPRHcK5VOss-JkHtcsoXyAUlsnQVXR8oQ1/s1600/Untitled-2.jpg" style="width: 420px;" /></div>
</div>
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQluKc1ld6rtHuVXfslmYMJhq2FgP-9AFcs83gEus6DGLSxgtJnZXqDDkg4Q4HBWaorQMkOysMHJNO9jCPRy2J3kWfNxm0OtxveNTe_CCeSq2WJHxJgtr56trxGB_zVJWLTu0UP832r1du/s1600/Untitled-1.jpg" style="width: 420px;" /></div>

Keterangan :
Kode {queue:false,duration:1000} berfungsi untuk mengatur gerakan gambar, jika nilai value 1000 diperbesar lagi maka gerakan dari gambar akan lambat, begitu juga sebaliknya.apabila nilai valuenya diperkecil, maka gerakan memecahnya gambar semakin cepat.
Untuk kode <div class="image_div kiri"> dan <div class="image_div kanan"> kedua kode tersebut merupakan gambar gambar yang sama.
Untuk mengganti menjadi onclik dalam JQuery, kode yang diganti fungsinya yaitu .hover(function() menjadi .click(function()
Lihat Contoh Gambar dibawah ini:

Selamat mencoba tutorial memecahkan gambar/image dengan Jquery, semoga aja bermanfaat untuk anda semua, happy blogging.