Membuat Partikel Menggunakan ParticleJS

Cara Menggunakan ParticleJS

Membuat Partikel Menggunakan ParticleJS – Particles.js adalah Library Javascript yang ringan untuk membuat partikel. Library Particles.js ini open-source dan kita dapat membuat halaman atau bagian arahan yang tampak cantik di situs web kita. Particles.js dibuat oleh Vincent Garreau dan sudah dibuat agar sangat mudah untuk menerapkan nya pada proyek web kita.

Dalam artikel ini, saya akan membahas semua fitur library dan membantu Anda memulai. Tutorial ini adalah bagian pertama dari seri dan hanya akan membahas dasar-dasarnya.

Apa itu ParticleJS?

Jika kalian pernah berada dalam situasi di mana kalian menambahkan efek pada halaman website, Particles.js akan melayani kalian dengan baik. Seperti yang terlihat dari namanya, ini adalah library JavaScript yang dapat membantu kita membuat sistem partikel. Selain itu, ringan, mudah digunakan, dan sangat mudah untuk dikustomisasi.

Menggunakan ParticleJS untuk membuat partikel itu sangat mudah. Artikel ini hanya pengenalan dasar, mencakup pengertian lalu cara penggunaan. Sekarang kita akan belajar Cara Menggunakan ParticleJS.

Membuat Partikel Menggunakan ParticleJS

Pertama, kita bisa mengunggahnya di server kita sendiri atau menggunakan CDJs jsdeliver seperti saya.

<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

Kita juga perlu membuat elemen DOM di mana Particles.js akan membuat partikel. Cukup beri beberapa id yang mudah diidentifikasi, untuk referensi nanti.

<div id="particles-js"></div>

Sekarang, untuk membuat sistem dasar partikel dengan pengaturan default, kalian hanya perlu satu baris JavaScript.

particlesJS();

Baca juga: Cara Membuat Function pada Javascript.

Partikel secara default berwarna putih. Mereka juga saling berhubungan dengan garis putih tipis. Jadi, jika kalian tidak melihat apa pun sekarang, ubah warna background menjadi warna yang lain. Berikut ini adalah CSS saya untuk menata div partikel:

#particles-js {
  background: cornflowerblue;
}

Konfigurasi ParticleJS

Meskipun hanya butuh empat baris kode untuk membuat demo sebelumnya, hasil akhirnya mungkin bukan yang kita bayangkan. Bagi saya, partikel-partikel itu tampak sedikit lebih besar dan padat. Mungkin kita ingin partikel menjadi bentuk yang berbeda atau memiliki ukuran acak. Particles.js memungkinkan kita untuk mengatur semua ini dan banyak lagi properti di JSON yang dapat kalian gunakan selama inisialisasi. Sintaks umum untuk memanggil fungsi akan terlihat seperti ini:

particlesJS(dom-id, path-json, callback (optional));

Di sini, dom-id adalah id elemen di mana kalian ingin partikel muncul. path-json adalah path ke file JSON dengan semua opsi konfigurasi, dan callback adalah fungsi panggilan balik opsional. Alih-alih jalan, kalian dapat langsung menempatkan kode JSON kalian di parameter kedua.

Mari mencoba membuat hujan salju menggunakan library mengagumkan ini. Pada awalnya, kita akan membuat fungsi sederhana yang terlihat seperti ini:

particlesJS(
{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 10,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "straight": false
    }
  },
  "interactivity": {
     
  }
});

Saya mengganti fungsi callback dan mengubah ID DOM menjadi nama yang lebih spesifik. Kepingan salju sebagian besar akan memiliki bentuk bulat. Mereka akan jatuh ke bawah dan memiliki ukuran yang tidak seragam. Untuk demo nya, silahkan kalian lihat di bawah ini atau langsung pada halaman codepen nya disini.

See the Pen Membuat Partikel Menggunakan ParticleJS by Abay (@abaykan) on CodePen.

Membuat Halaman 404 Menggunakan ParticleJS

Agar tidak menggantung, saya akan menambahan sedikit, saya akan membuat halaman 404 Error dengan efek partikel menggunakan ParticleJS. Silahkan lihat demonya disini. Sekian artikel singkat tentang Membuat Partikel Menggunakan ParticleJS, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.