Memasang Background Animasi Partikel dengan particles.js

Posted on

particle.js

Halo sahabat programmer, jumpa lagi dengan lambecode. Pembahasan kita kali ini tentang cara membuat background animasi partikel yang bergerak dengan menggunakan particle.js. Apa pentingnya membuat tampilan animasi yang bergerak? Tentu saja jawabannya adalah untuk mempernyaman tampilan pada halaman website. Sebisa mungkin tampilan halaman website dibuat menarik agar menarik minat pengunjung. Salah satu library yang digunakan untuk membuat tampilan menjadi menarik yaitu particles.js.

particles.js merupakan library JavaScript yang digunakan untuk membuat partikel. Selain ringan, particles.js sangat mudah diinstal dan digunakan oleh siapa saja. DItambah lagi, anda dapat melakukan modifikasi ataupun melakukan custom terhadap JavaScript yang ada.

Pada tutorial ini, kami bahas semua yang ada particles.js. Sebelum melakukan instalasi, kami tampilkan demonstrasi dari particles.js agar anda lebih memahaminya.

 

See the Pen XxWpeM by b1em8in (@b1em8in) on CodePen.


Cara Install particles.js

Ada banyak cara untuk melakukan instalasi particles.js. Namun yang terpenting dan umum digunakan adalah dengan menggunakan CDNGitHub, dan download lagsung dari website particle.js.

Berikut ini link download untuk particle.js

Website particles.js

CDN

GitHub

npm

npm install particles.js

Bower

bower install particles.js –save

Rails Assets

gem ‘rails-assets-particles.js’

Meteor

 

Menggunakan particles.js

Untuk menggunakan particles.js sangat mudah. Yang perlu dilakukan adalah melakukan load terhadap JavaScrpit particle.js pada index.html.

Selain itu, jangan lupa menyertakan JavaScript di dalam index.html. JavaScript yang digunakan adalah JavaScript yang diperoleh dari proses instalasi di atas.

Melakukan Modfikasi / Customisasi particle.js

Anda dapat melakukan modifikasi terhadap particle.js yang telah terinstall. Caranya dengan merubah elemen yang ada pada JavaScript. Berikut ini list dari elemen yang dapat anda modifikasi.

keyoption type / notesexample
particles.number.valuenumber40
particles.number.density.enablebooleantrue  /  false
particles.number.density.value_areanumber800
particles.color.valueHEX (string) "#b61924"  
RGB (object) {r:182, g:25, b:36}  
HSL (object) {h:356, s:76, l:41}  
array selection (HEX) ["#b61924", "#333333", "999999"]  
random (string)"random"
particles.shape.typestring "circle"  
array selection"edge"  
"triangle"  
"polygon"  
"star"  
"image"  
["circle", "triangle", "image"]
particles.shape.stroke.widthnumber2
particles.shape.stroke.colorHEX (string)"#222222"
particles.shape.polygon.nb_slidesnumber5
particles.shape.image.srcpath link "assets/img/yop.svg"  
svg / png / gif / jpg"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.widthnumber 100
(for aspect ratio)
particles.shape.image.heightnumber 100
(for aspect ratio)
particles.opacity.valuenumber (0 to 1)0.75
particles.opacity.randombooleantrue  /  false
particles.opacity.anim.enablebooleantrue  /  false
particles.opacity.anim.speednumber3
particles.opacity.anim.opacity_minnumber (0 to 1)0.25
particles.opacity.anim.syncbooleantrue  /  false
particles.size.valuenumber20
particles.size.randombooleantrue  /  false
particles.size.anim.enablebooleantrue  /  false
particles.size.anim.speednumber3
particles.size.anim.size_minnumber0.25
particles.size.anim.syncbooleantrue  /  false
particles.line_linked.enablebooleantrue  /  false
particles.line_linked.distancenumber150
particles.line_linked.colorHEX (string)#ffffff
particles.line_linked.opacitynumber (0 to 1)0.5
particles.line_linked.widthnumber1.5
particles.move.enablebooleantrue  /  false
particles.move.speednumber4
particles.move.directionstring"none"  
"top"  
"top-right"  
"right"  
"bottom-right"  
"bottom"  
"bottom-left"  
"left"  
"top-left"
particles.move.randombooleantrue  /  false
particles.move.straightbooleantrue  /  false
particles.move.out_modestring "out"  
(out of canvas)"bounce"
particles.move.bounceboolean true  /  false
(between particles)
particles.move.attract.enablebooleantrue  /  false
particles.move.attract.rotateXnumber3000
particles.move.attract.rotateYnumber1500
interactivity.detect_onstring"canvas", "window"
interactivity.events.onhover.enablebooleantrue  /  false
interactivity.events.onhover.modestring "grab"  
array selection"bubble"  
"repulse"  
["grab", "bubble"]
interactivity.events.onclick.enablebooleantrue  /  false
interactivity.events.onclick.modestring "push"  
array selection"remove"  
"bubble"  
"repulse"  
["push", "repulse"]
interactivity.events.resizebooleantrue  /  false
interactivity.events.modes.grab.distancenumber100
interactivity.events.modes.grab.line_linked.opacitynumber (0 to 1)0.75
interactivity.events.modes.bubble.distancenumber100
interactivity.events.modes.bubble.sizenumber40
interactivity.events.modes.bubble.durationnumber 0.4
(second)
interactivity.events.modes.repulse.distancenumber200
interactivity.events.modes.repulse.durationnumber 1.2
(second)
interactivity.events.modes.push.particles_nbnumber4
interactivity.events.modes.push.particles_nbnumber4
retina_detectbooleantrue  /  false

 

Leave a Reply

Your email address will not be published. Required fields are marked *