Membuat Background Particle dots yang atraktif dengan particles.js

09Mei, 2020

Jumpa lagi sobat Newcyber.NET, Assalamuálaikum Wr. Wb, gimana ni kabar sobat underground? masih pada sehat wal afiat kan ya? semoga aja deh ya selalu diberian kesehatan dan rejeki yang melimpah... amin.. 🙂

Kali ini Kita mau membahas tentang background ya sob, tentunya bukan sembarang background nih sob, tapi background spesial yang pasti akan membuat blog ataupun website kalian bakal jadi keren dan menarik, dan pada postingan
kali ini kita mau berbagi nih tentang tutorial dan seperangkat alat untuk 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.

 

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: ;
      padding: ;
      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, 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  Membuat Layanan Cloud Storage Sendiri Dengan ownCloud

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Dicari Penulis Artikel dengan Tema Tutorial Seputaran Software ataupun Android!

X
Trust Guard Security Scanned