Membuat Background Particle dots yang atraktif dengan particles.js
Apr 12, 2018
Add Comment
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.
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Membuat Background Particle dots yang atraktif dengan particles.js"
Post a Comment