Cara Membuat Efek Explode dengan jQuery

Cara Membuat Efek Explode dengan jQuery - Didalam library jQuery terdapat efek explode yang bisa kita gunakan pada suatu elemen berupa gambar, teks maupun elemen lainnya. Efek ini sangat menarik sekali jika kita tambahkan pada elemen yang kita inginkan dimana efek ini akan menampilkan efek seperti memecah elemen menjadi beberapa bagian. Nah, kali ini saya akan bagikan tutorial nya buat kalian yang ingin mencoba membuat efek explode di jQuery. Penasaran seperti apa cara membuat efek explode ? Kalo gitu, langsung saja simak langkah - langkah Cara Membuat Efek Explode dengan jQuery berikut ini.

Kita mulai langkah pertama dengan menentukan terlebih dahulu elemen apa yang akan dikenai efek explode, pada kasus ini saya menjadikan gambar sebagai objek yang akan dikenai efek explode. Supaya terlihat lebih rapih dalam menempatkan layout saya juga menggunakan bootstrap untuk mengatur gambar beserta elemen lainnya. Nah, kalian bisa buat satu file index.html dan ketikan kode berikut untuk membuat layout pada gambar.

 <body>
  <div class="container mt-3">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card border-dark">
          <div class="card-header bg-dark">
            <button id="hide" class="btn btn-warning">Hide image</button>
            <button id="show" class="btn btn-warning float-right">Show image</button>
          </div>
          <div class="card-body">
            <img src="jquery.png" class="target" width="498">
          </div>
        </div>
      </div>
    </div>
  </div>
 </body>

Setelah membuat dan mengatur layout dan gambarnya, langkah selanjutnya adalah membuat efek explode pada gambar. Untuk efek explode kita buat dengan kode jQuery dan tentunya jangan lupa untuk menyisipkan library dari jQuery agar efek explode bisa berfungsi dengan baik. Untuk menyisipkan library jQuery kalian bisa dengan cara offline ataupun dengan cara online itu sama saja, kebetulan saya menggunakan cara online :)

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

 <script type="text/javascript" language="javascript">
   $(document).ready(function() {

     $("#hide").click(function(){
        $(".target").hide( "explode", {pieces: 16 }, 2000 );
     });

     $("#show").click(function(){
        $(".target").show( "explode", {pieces: 16}, 2000 );
     });
   
   });
 </script>

Jika sudah kalian ketikan semua kode diatas, selanjutnya simpan kembali filenya kemudian kalian bisa buka pada browser untuk melihat hasil akhirnya. Maka tampilannya akan terlihat seperti gambar dibawah ini, kalian bisa klik tombol untuk menjalankan efek explode nya.

Cara Membuat Efek Explode dengan jQuery

Baiklah, saya cukupkan tutorial sederhana tentang bagaimana Cara Membuat Efek Explode dengan jQuery, semoga tutorial ini bermanfaat. Selamat mencoba dan sampai jumpa diartikel selanjutnya :) 

6 Agustus 2019

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