Membuat Background Animasi Bergerak Menggunakan Particle.js

Membuat Background Animasi Bergerak Menggunakan Particle.js

Particle.js adalah suatu plugin javascript yang menyediakan animasi background bergerak. Untuk cara menggunakannya saya akan bahas pada artikel kali ini yang berjudul Membuat Background Animasi Bergerak Menggunakan Particle.js.

Langkah pertama teman-teman harus kunjungi halaman particle.js disini jika sudah maka teman-teman download filenya.

Sebelum kita membuat filenya teman-teman bisa ubah bentuk animasinya dengan mengubahnya melalui menu setting yang terletak di pojok kanan seperti pada gambar di bawah ini.

Membuat Background Animasi Bergerak Menggunakan Particle.js

Membuat Background Animasi Bergerak Menggunakan Particle.js

Langkah selanjutnya untuk membuat Membuat Background Animasi Bergerak Menggunakan Particle.js teman-teman buat struktur html seperti pada script di bawah ini.

<div id="particles-js">

  <div class="banner" style="width: 500px;background: rgba(255,255,255,0.5); position: absolute; top:40%;left:30%;text-align: center;padding: 20px">

    <h1>Membuat Background Animasi Bergerak Menggunakan Particle.js</h1>

  </div>

</div>

Jangan lupa untuk file css dan javascriptnya pastikan terkoneksi dengan benar.

<link rel="stylesheet" media="screen" href="css/style.css">

<script src="../particles.js"></script>

<script src="js/app.js"></script>

Dan langkah terakhir yaitu teman-teman buat scriptnya seperti pada script dibawah.

<script>

  /* ---- particles.js config ---- */

particlesJS("particles-js", {

  "particles": {

    "number": {

      "value": 100,

      "density": {

        "enable": true,

        "value_area": 800

      }

    },

    "color": {

      "value": "#ffffff"

    },

    "shape": {

      "type": "circle",

      "stroke": {

        "width": 2,

        "color": "#ffffff"

      },

      "polygon": {

        "nb_sides": 5

      },

      "image": {

        "src": "img/github.svg",

        "width": 100,

        "height": 100

      }

    },

    "opacity": {

      "value": 0.5,

      "random": false,

      "anim": {

        "enable": false,

        "speed": 1,

        "opacity_min": 0.1,

        "sync": false

      }

    },

    "size": {

      "value": 50,

      "random": true,

      "anim": {

        "enable": false,

        "speed": 40,

        "size_min": 0.1,

        "sync": false

      }

    },

    "line_linked": {

      "enable": true,

      "distance": 150,

      "color": "#ffffff",

      "opacity": 0.4,

      "width": 1

    },

    "move": {

      "enable": true,

      "speed": 6,

      "direction": "none",

      "random": false,

      "straight": false,

      "out_mode": "out",

      "bounce": false,

      "attract": {

        "enable": false,

        "rotateX": 600,

        "rotateY": 1200

      }

    }

  },

  "interactivity": {

    "detect_on": "canvas",

    "events": {

      "onhover": {

        "enable": true,

        "mode": "repulse"

      },

      "onclick": {

        "enable": true,

        "mode": "push"

      },

      "resize": true

    },

    "modes": {

      "grab": {

        "distance": 140,

        "line_linked": {

          "opacity": 1

        }

      },

      "bubble": {

        "distance": 400,

        "size": 40,

        "duration": 2,

        "opacity": 8,

        "speed": 3

      },

      "repulse": {

        "distance": 200,

        "duration": 0.4

      },

      "push": {

        "particles_nb": 4

      },

      "remove": {

        "particles_nb": 2

      }

    }

  },

  "retina_detect": true

});

</script>

Jika tampil maka akan seperti pada gambar di bawah ini. Disini saya mencoba membuat animasi background dengan bentuk lingkaran dan ukuran yang bermacam-macam.

Membuat Background Animasi Bergerak Menggunakan Particle.js

Demikian artikel tentang cara Membuat Background Animasi Bergerak Menggunakan Particle.js.

14 Juni 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