Setelah membuat Postingan Acak, Kali ini Aurealisa akan membagikan tutorial 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://ensikology.github.io/resource/js/jquery.jshttps://cdn.jsdelivr.net/gh/ensikology/ensikology.github.io@245f30b/blog/js/jquery.min.jsMasukan juga Plugin JQuery Particle ini
https://cdn.jsdelivr.net/gh/ensikology/ensikology.github.io@245f30b/blog/js/intro.jsKemudian 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJfbzNeZxbXWU22Yl4cRD5CaUu3B6RDRMQGsnwyopr86wCzYnhrs1E8cj1rUWKCEkNBiw4IuMFWSGjKwCF-NhV__deYRXV8R6veLMw34N0jp9fUoqo1gH_F-rbYR1hMBepfuLxhXDWkOc/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%}}Untuk anda yang ingin menerapkan 404 Not Found saat Halaman tidak ditemukan silahkan baca Disini
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://aurealisa.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, tolong beri tahu Aurealisa di komentar jika anda menggunakan partikel dalam mencobanya! semoga bermanfaat.
Add your comment Hide comment