Membuat Background Animasi Partikel Bergerak

Membuat Background Animasi Partikel Bergerak

Membuat Background Animasi Partikel Bergerak
Membuat Background Animasi Partikel Bergerak

Hallo sahabat ruangcoder, artikel kali ini tentang Cara Membuat Background Animasi Partikel Bergerak. membuat background titik particle yang atraktif dengan menggunakan particles.js, background ini sangat bagus karena memiliki sebuah animasi, nah sering dong kalian melihat ini, sama admin juga, cuma bingung gimana ya buatnya ???, akhirnya admin dapat solusinya, kenapa tidak dibikin jadi artikel di blog admin juga ya hahaha, akhirnya admin putuskan untuk membuat nya di blog admin juga.

membuat Tech Lines Background dengan library JS. Pada dasarnya, ada latar belakang layar penuh gambar dan di atas gambar, kalian akan melihat garis partikel seperti latar belakang teknologi atau geek. Garis - garis semacam ini pada dasarnya mewakili bidang teknologi seperti coding, AI , dll untuk audiens. garis itu akan terhubung ke kursor mouse dan bergerak sesuai dengan arah mouse .

Jadi, Hari ini admin berbagi Animasi Kanvas Partikel Dengan Partikel JS . Ada library terpisah untuk membuat partikel bernama particle.js ( get ), yang telah admin gunakan untuk membuat program ini. Ini adalah  library JavaScript yang ringan untuk membuat  partikel . Seluruh program sangat singkat dan sepenuhnya berdasarkan itu.

Nah jika kalian tertarik dengan programnya, kalian bisa melihat preview nya dibawah ini, tentu dengan source code yang admin sediakan.


Membuat Background Animasi Partikel Bergerak


Pertama, admin membuat tag div tunggal dengan nama ID menggunakan HTML . Itu satu-satunya hal yang telah admin lakukan menggunakan HTML, tetapi admin telah menautkan file lain seperti tautan CSS, JS dan praticle.js dalam file HTML . HTML memiliki lebih sedikit bagian karena didasarkan pada library dan program yang sangat mendasar.

Sekarang menggunakan CSS , untuk  menempatkan semua elemen di tempat yang tepat seperti gambar, dan partikel. Ada juga CSS memiliki bagian yang sangat kecil, karena admin hanya memberikan tinggi dan lebar untuk body dan container div. File JavaScript hanya untuk mendeklarasikan nilai partikel seperti kerapatan, kecepatan, dll . Pertama admin mengambil tag div container menggunakan dokumen JS . perintah getElementById

admin telah menyimpan ID dan opsi untuk animasi dalam variabel , dan opsinya adalah fungsi pre-built library. Untuk menempatkan gambar latar belakang , admin menggunakan perintah background library.Kalian akan mengerti setelah mendapatkan kode , saya tidak bisa menjelaskan semuanya secara tertulis.

Untuk membuat program ini, kalian harus membuat 3 file, pertama untuk HTML , kedua untuk CSS , dan yang ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat program ini tanpa masalah.


Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html> 
<!-- Code By RuangCoder ( https://www.ruangcoder.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Canvas Particle Animation | RuangCoder.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

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

  <script src='https://rawgit.com/JulianLaval/canvas-particle-network/master/particle-network.min.js'></script>
  <script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder ( https://www.ruangocoder.com ) */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
}

Langkah terakhir, Buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder ( https://www.ruangcoder.com )
var canvasDiv = document.getElementById('container');
var options = {
  particleColor: '#fff',
  background: 'https://webdevtrick.com/wp-content/uploads/coding.jpg',
  interactive: true,
  speed: 'high',
  density: 'high'
};
var particleCanvas = new ParticleNetwork(canvasDiv, options);

Nah sampai disini kalian telah berhasil Membuat Background Animasi Partikel Bergerak, mungkin artikel nya sampai disini saja, semoga bermanfaat buat kalian, dan terimakasih sudah berkunjung, jangan bosan - bosan untuk berkunjung.

Anda mungkin menyukai postingan ini