Membuat Efek Mouse Move Gambar dengan jQuery

Membuat Efek Mouse Move Gambar dengan jQuery - Efek mouse move merupakan salah satu efek didalam jQuery yang bisa kita gunakan untuk mengubah posisi suatu objek dengan cara mengarahkan mouse. Biasanya ini disebut juga dengan efek parallax, efek ini membuat objek seolah - olah menjadi bergerak atau hidup. Nah, berikut ini saya akan mencoba mempraktekan bagaimana Membuat Efek Mouse Move Gambar dengan jQuery, siapa tau kalian juga ingin membuatnya.

Langkah 1 : Membuat Efek Mouse Move Gambar dengan jQuery

Kita awali langkah pertama dengan menyiapkan bahan - bahan sebagai objek untuk membuat efek, yakni satu buah gambar bebas atau kalian bisa menggunakan gambar berikut sebagai bahan untuk objek nya.

Membuat Efek Mouse Move Gambar dengan jQuery

Langkah 2 : Membuat Efek Mouse Move Gambar dengan jQuery

Berikutnya, buatlah file HTML kemudian ketikan struktur sederhana seperti berikut dan simpan dengan nama index.html.

<body>
    <div id="container">
      <div class="object"></div>
    </div>
</body>

Langkah 3 : Membuat Efek Mouse Move Gambar dengan jQuery

Selanjutnya, kita akan sedikit mengatur layout dan objek gambar dengan menambahkan posisi dan ukuran gambar dengan sintak CSS berikut ini.

#container {
  height:50%;
}
.object {
  background: url("orang.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 50%;
  position: absolute;
  top: 10px;
  width: 200px;
}

Langkah 4 : Membuat Efek Mouse Move Gambar dengan jQuery

Langkah terakhir adalah membuat fungsi efek mouse move dengan sintak jQuery, tentu sebelum mengetikan sintaknya silahkan kalian load terlebih dahulu library jQuery nya, barulah setelah itu membuat fungsi efek mouse move nya seperti berikut.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
     $(window).mousemove(function(evt) {
        var change;
        var posX = evt.clientX;
        var posY = evt.clientY;
        var left = change * 20;
        var posX = posX * 2;
            posY = posY * 2;
        $('.object').css('top',((0+(posY/50)) + "px") );
        $('.object').css('right',(( 0+(posX/50)) + "px") );          
      });
</script>

Setelah semua sintak telah diketikan, simpan kembali filenya kemudian buka pada browser masing - masing dan lihat hasilnya, maka ketika kita mengarahkan kursor objek akan bergerak mengikuti arah mouse atau sebaliknya.
Baik, cukup sampai disini tutorial sederhana Membuat Efek Mouse Move Gambar dengan jQuery, semoga bermanfaat dan selamat mencoba :)

27 Maret 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat