Particle JS

index.html

<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>

particle-js.markdown

Particle JS

A Pen by Ensikology on CodePen.

License.

script.js

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
        }
      }
    }
  });
});

scripts

<script src="https://cdn.jsdelivr.net/gh/ensikology/ensikology.github.io@245f30b/blog/js/intro.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.css

*,*: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%}}