.png)
Membuat Background Particle dots yang atraktif dengan particles.js
Assalamualaikum.
Wr. Wb, kali ini admin masih membahas tentang background, dan pada postingan
kali ini admin mau berbagi tutorial membuat background titik particle yang
atraktif dengan menggunakan particles.js, background ini sangat bagus karena
memiliki animasi yang menarik dan interaktif ketika di hover atau di klik dengan
mouse menampilkan feedback yang interaktif. sehingga backgroundnya tidak
membosankan dan bisa dimainkan.
ok langsung
saja untuk membuatnya masukan kode berikut:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Particle JS</title> <style media="screen"> #particles-js{ background: #0e0483; height: 100vh; } body { width: 100%; font: normal 16px Arial, Helvetica, sans-serif; color: #333; margin: 0; padding: 0; box-sizing: border-box; } #login { background: #fff; opacity: 0.9; padding: 2em; position: absolute; top: 200px; left: 150px; } #login h3 { color: #555555; } #login input[type="text"], #login input[type="password"] { padding: 7px; margin-bottom: 10px; border: 1px solid #ccc; } #login input[type="submit"] { padding: 7px; background: rgb(5, 200, 118); color: #fff; border: none; opacity: 1; display: block; float: right; } </style> </head> <body> <div id="particles-js"> <div id="login"> <h3>Login</h3> <form action="#" method="post"> <div> <label for="username">Username</label><br> <input type="text" name="" placeholder="Username"> </div> <div> <label for="password">Password</label><br> <input type="password" name="" placeholder="Password"> </div> <input type="checkbox" name=""> Ingat Saya <input type="submit" name="" value="Login"> </form> </div> </div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" charset="utf-8"></script> <script type="text/javascript"> particlesJS.load('particles-js','particles.json', function() { console.log('particles.json loaded...'); }) </script> </body> </html>
Kemudian
buat lagi file dengan nama particles.json dengan isi sebagai berikut :
{ "particles":{ "number":{ "value":300 }, "size":{ "value":3 } }, "interactivity":{ "events":{ "onhover":{ "enable":true, "mode": "repulse" } }, "modes":{ "repulse":{ "distance":50, "duration":0.4 } } } }
Selanjutnya
cek hasilnya di browser kesayangan anda, untuk demonya bisa kalian lihat pada
tautan dibawah. sekianlah tutorial kali ini selamat mencoba salam koding otak
pusing jari keriting. jangan lupa share tutorial
ini ke teman anda semoga bermanfaat, Wasalamualaikum Wr. Wb.
0 komentar :