See the Pen
particles.js Demo Newcyber.NET by Karunia Prima Aditya (@newcyber)
on CodePen.
Baik sobat Newcyber.NET, Langung simak saja ya tutorial berikut ini, tapi kita ingatkan kembali nih buat sobat webmaster jangan sampai ketinggalan tuh tutorial menarik yang lain dengan berlangganan News Letter kita ya 🙂
Let’s do it! Pertama-tama 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 :
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, Silahkan Cek hasilnya menggunakan 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.
Related Posts
Hay sobat Newcyber.NET, sudah lama sekali gak posting tentang Linux, padahal di sini kita...
Di Windows 10, kamu bisa konfigurasi jaringan untuk menggunakan IP address manual (Static) atau...