Artikel kali ini sebenarnya bukan dari saya sendiri, melainkan ada orang yang request untuk dibuatkan tutorial membuat script particle dots.
Setelah dipikir pikir sepertinya menarik juga. Kamu bisa melihat previewnya dihalaman demo dibawah ini. Keren yakan wkwkwk.
Source code yang saya pakai saya ambil referensi dari https://github.com/VincentGarreau/particles.js yang bisa kamu lihat demonya disini https://codepen.io/VincentGarreau/full/pnlso.
Awalnya saya agak bingung dengan penempatan canvas sebagai background. Dan setelah melihat tutorial serupa di mbah google, sepertinya belum ada tutorial yang mencerahkan saya untuk membuat particles.js sebagai background secara full.
Namun itu semua berubah saat saya menemukan harapan di stackoverflow. Dan sekarang saya akan membagikan tutorial untuk membuat hal serupa dihalaman ini yang bisa kamu terapkan di blog maupun website kamu. Langsung saja scroll kebawah.
1. Pasang kode CSS
Pertama seperti biasa, kalian buka setelan tema dan pilih edit html. Kemudian kalian cari ]]></b:skin>. Selanjutnya, kalian copy paste script CSS dibawah ini tepat diatas ]]></b:skin>.
canvas {
display: block;
vertical-align: bottom;
z-index: -1;
}
#particles-js {
width: 100%;
height: 100%;
position: fixed;
z-index: -10;
top: 0;
left: 0
}
Untuk website non blogger, seperti css pada umumnya kalian masukkan saja script diatas diantara kode <style> dan </style>
2. Pasang id particles js
Kedua, kalian cari tag pembuka body kemudian kalian tambahkan <div id='particles-js'></div> tepat dibawah <body> sehingga kurang lebih menjadi seperti ini:
<body> <div id='particles-js'></div>
3. Pasang script JavaScript
Ketiga, kalian copy paste kode dibawah ini tepat diatas tag penutup body </body> atau mungkin sudah diparse menjadi <!--</body>--></body>.
<script src="https://cldup.com/S6Ptkwu_qA.js"></script>
<script>/*<![CDATA[*/
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 700 } },
"color": {
"value": "#ff1a94" },
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#ff1a94" },
"polygon": {
"nb_sides": 5 } },
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false } },
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false } },
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ff1a94",
"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": "grab" },
"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>
Tentunya kalian bisa kustomisasi warna partikelnya pada bagian yang saya tandai diatas berupa warna garis dan warna titik penghubung partikel.
Sebagai opsional, seperti pada demonya di https://codepen.io/VincentGarreau/full/pnlso, pada saat kalian mengarahkan kursor mouse ataupun mengeklik background terdapat animasi yang yaa bisa dibilang keren sih. Tetapi disini saya sembunyikan agar tidak memberatkan loading halaman yang saya pasang script particles.js. Jika kalian tetap ingin memunculkannya, kalian bisa menghapus z-index: -10; pada script css diatas tepatnya pada bagian yang sudah saya tandai.
Jangan lupa save tema setelahnya. Dan selesai deh.
Sekian, Membuat Particles.js Sebagai Background di website dan Blogger. Semoga bermanfaat.