Membuat Particle JS di Blog - Ensikology

Membuat Particle JS di Blog

Daftar Isi [Tampilkan]


Pernahkan anda melihat blog/web dengan background berupa partikel-partikel yang bergerak, seperti contoh di bawah?

Kali ini Ensikology akan membagikan cara memasang background partikel di blog/web.

Apa itu ParticleJS?

Particles.js adalah Library Javascript yang ringan untuk membuat partikel. Library Particles.js ini open-source dan kita dapat membuat halaman atau bagian arahan yang tampak cantik di situs web kita. Particles.js dibuat oleh Vincent Garreau dan sudah dibuat agar sangat mudah untuk menerapkan nya pada proyek web kita.

Oke langsung saja untuk membuatnya masukan kode berikut:

Pemasangan


Masukan Plugin JQuery dibawah ini tepat diatas </head> jika ditemplatenya belum ada.
https://cdn.jsdelivr.net/gh/ensikology/ensikology.github.io@245f30b/blog/js/jquery.min.js
atau
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

Masukan juga Plugin JQuery Particle ini
https://cdn.jsdelivr.net/gh/ensikology/ensikology.github.io@245f30b/blog/js/intro.js

Kemudian masukan CSS dibawah ini pada template.
*,*:before,*:after {box-sizing:border-box}
a{text-decoration:none;outline:none}
.gerak{display:inline-block;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);padding:10px 20px;font-size:.81rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;margin:.375rem;border:0;-webkit-border-radius:.125rem;border-radius:.125rem;cursor:pointer;text-transform:uppercase;white-space:normal;word-wrap:break-word;color:#fff!important;}
.text-center{text-align:center!important}
.text-uppercase{text-transform:uppercase!important}
.hanya-cover{width:100%;-js-display:flex;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}
.hanya-widget{float:left;width:100%;min-height:600px}
.penutup{background:url(//2.bp.blogspot.com/-Ti8RnhUY9wg/XTtaCQVEQJI/AAAAAAAACNE/EZ_H3anQ_x0TwFtlOrrkhzScgvPfDqHqQCLcBGAs/s1600/OgPcHqz_ensikology.jpg) 50% no-repeat;background-size:penutup;overflow:hidden;height:100%;display:block;position:relative}
.penutup:before{position:absolute;top:0;left:0;content:"";width:100%;height:100%;background-color:#122153;opacity:0.55;filter:alpha(opacity=55)}
.penutup .penutup-ensikology{transform:translate(-50%,-50%)!important;top:50%;left:50%;position:absolute;z-index:2;padding:0 15px}
.penutup .penutup-ensikology .terserahgblk{position:relative;display:block;margin-bottom:10px;color:#fff;text-transform:uppercase}
.penutup .penutup-ensikology .terserahgblk:before{position:absolute;bottom:-20px;left:50%;content:"";background:white;width:170px;height:2px;margin-left:-85px}
.penutup .penutup-ensikology p{display:block;position:relative;z-index:1;margin-bottom:30px;padding-top:24px;color:#fff;font-weight:300;line-height:1.5;text-align:center}
.penutup .penutup-ensikology .gerak{position:relative;z-index:10;text-transform:uppercase;letter-spacing:1px;box-shadow:unset;border:1px solid #fff}
.gblk{color:#008df2;background-image:none;background-color:transparent;border-color:#008df2}
.penutup .penutup-ensikology .gerak:hover{border:1px solid #008df2;background-color:#008df2}
.penutup .more{position:absolute;bottom:0;left:0;width:100%;margin-bottom:15px;color:#fff;font-size:0.75em;text-transform:uppercase;letter-spacing:10px;text-align:center}
.penutup canvas{position:absolute;top:0;left:0;z-index:1}
@media (min-width:360px) and (max-width:415px){.penutup .penutup-ensikology .terserahgblk{font-size:1.7em;letter-spacing:2px}}
@media (min-width:414px)and (max-width:641px){.penutup .penutup-ensikology .terserahgblk{font-size:1.8em;letter-spacing:5px}.penutup .penutup-ensikology p{font-size:1.2em;letter-spacing:2px}}
@media (min-width:640px){.penutup .penutup-ensikology .terserahgblk{font-size:3em;letter-spacing:10px}.penutup .penutup-ensikology p{font-size:1.714em;letter-spacing:5px}}
@media (min-width:320px) and (max-width:768px){.penutup .penutup-ensikology{width:85%}}
@media (min-width:769px){.penutup .penutup-ensikology{width:65%}}

Kita juga perlu membuat elemen DOM di mana Particles.js akan membuat partikel.
<div class='hanya-cover'>
<div class='hanya-widget'>
<div class='penutup' id='particle-ground'>
<div class='penutup-ensikology text-center'>
<h1 class='terserahgblk'>ENSIKOLOGY</h1>
<p>Share SEO Friendly and Responsive Blogger Theme</p>
<a class='gerak gblk' href='https://ensikology.blogspot.com/search' title=''>LIHAT KOLEKSI</a>
</div>
<p class='more'>Explore Our Collection</p>
</div>
</div>
</div>

Langkah terakhir memasukan script json diatas </body>
<script>//<![CDATA[
jQuery(document).ready(function($) {
  'use strict';
  particlesJS('particle-ground', {
    "particles": {
      "number": {
        "value": 120,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#8AC7F7"
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": "#8AC7F7"
        },
        "polygon": {
          "nb_sides": 5
        },
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 4,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 6,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "bounce": false,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "grab"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 140,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 8,
          "speed": 3
        },
        "repulse": {
          "distance": 200,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    }
  });
});
//]]></script>



Bersenang-senanglah utk melihat apa yang dapat anda lakukan dengan semua ini, dan beri tahu kami di komentar di mana anda menggunakan partikel dalam prakteknya!
Ingatlah untuk selalu memberikan komentar yang sopan dan mengikuti Pedoman Komunitas kami.

Bagikan tanggapanmu

2 KOMENTAR
SEMBUNYIKAN

Tanggapan kamu

Emoticon
Sort by
  1. FANSBETTING – MASTER AGENT JUDI TARUHAN BOLA ONLINE, CASINO, TOGEL, POKER TERBAIK DI INDONESIA

    FANSBETTING - Selamat datang bettors online Indonesia di website Agen Judi Online terpercaya Fansbetting. Bersama kami anda bisa bergabung dan mulai bermain di berbagai game seperti judi bola online,Poker Online,Casino Online,Togel online dan bolatangkas online.

    Fansbetting, Master Agent yang melayani pembuatan account untuk taruhan bola online seperti sbobet, ibcbet, cmdbet. Ada juga permainan Casino Online, Tangkas, Togel, dan Poker. Banyak yang sudah menjadi member setia FANSBETTING, dikarenakan sangat terjamin keamanan nya, dan sudah sangat Terpercaya. Selain Proses Deposit-Withdraw yang super cepat, FANSBETTING juga melayani tuntas setiap transaksi member setia nya.

    Dengan pengalaman bertahun-tahun dalam mengelola judi online di internet di indonesia, kami telah paham betul kebutuhan para bettors yakni kenyamanan, keamanan dan proses yang cepat dari deposit dan withdraw.

    Silahkan daftar dan menjadi member kami dengan mengisi form pendaftaran atau juga dengan menghubungi CS kami yang selalu online 24 jam di live chat. Dapatkan pelayanan yang cepat dan ramah dari kami agen judi online www.fansbetting.com.

    Game yang disediakan yaitu :
    * SPORTSBOOK:SBOBET,IBCBET,368BET.
    * LIVECASINO:338A-SBOBET CASINO,ION CASINO,CBO855.
    * BOLATANGKAS:TANGKAS777,88TANGKAS,BOLATANGKAS2,KLUB TANGKAS.
    * TOGEL:KLIK4D,ISIN4D.
    * POKER:SAHABATPOKER,ASIAPOKER77,POKERKING88,SENANGPOKER
    * NEW GAME : SABUNG AYAM

    Minimal Deposit 50.000,-
    Minimal Withdraw 50.000,-

    JOIN US : WWW.FANSBETTING.COM
    WHATSAPP: +855963156245
    WECHAT : fansbetting3
    line : fansbetting

    BalasHapus
  2. mantab, izin nyoba ya gan

    BalasHapus