-->

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 Response to "Membuat Background Particle dots yang atraktif dengan particles.js"

Post a Comment

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel