Cara Membuat Animasi Partikel dengan Canvas di Blog

www.azid45.web.id - Cara Membuat Animasi Partikel dengan Canvas di Blog. Pada artikel sebelumnya "Cara Membuat Tampilan Home Page Seperti Blog Kode Jarwo" sudah saya bahas terkait membuat partikel animasi ini. Memang secara umum partikel animasi ini mirip dengan apa yang digunakan pada template Blog Kode Jarwo akan tetapi dari segi kode CSS dan Script tentunya sangat tutorial kali ini berbeda dengan sebelumnya yang pernah saya share.

Perbedaan antara kode milik kode jarwo dengan kode yang saya bagikan sekarang adalah memiliki perpaduan antara panduan yang pernah di share oleh Kompiajaib dengan template blog kode jarwo yang hingga saat ini masih aktif dipakai oleh beliau. Dengan kedua perpaduan tersebut akhirnya pada tutorial ini saya kategorikan menjadi dua, yaiut membuat animasi partikel (Particle Animation) dengan canvas pada Blog AMP HTML dan animasi partikel dengan canvas pada Blog Non AMP HTML.

Membuat Animasi Partikel dengan Canvas di Blog AMP HTML

Untuk membuat animasi partikel berdampingan dengan canvas yang apabila diklik akan semakin banyak ini tentunya dapat menjadikan daya tarik bagi pengunjung blog anda serta menjadikan blog anda sedikit lebih keren daripada blog lainnya. Dengan bantuan efek animasi dengan javascript, deskripsi blog anda pada home page tentunya akan menjadi elegan untuk dilihat pengunjung.

Akan tetapi bagaimana dengan blog AMP HTML?. Anda pasti tahu bahwa blog yang valid AMP tidak boleh menggunakan java script, jika tetap anda tambahkan java script pada template yang anda gunakan maka tentunya akan menjadikan error AMP sehingga kinerja AMP anda akan terganggu.

Namun jangan khawatir anda tidak bisa menggunakan animasi partikel ini, karena dengan sentuhan hasil pola pikir dan nalar kang Adhy Suryadi anda bisa membuat animasi partikel semudah menggunakan blog Non AMP. Bagaimana caranya?, dengan menggunakan layanan hosting dari luar dan memanfaatkan fungsi AMP-Iframe anda bisa membuat animasi partikel dengan canvas.

Lebih lengkapnya anda bisa menyimak langkah-langkahnya dibawah ini:

Pertama, login blogger

Kedua, masuk menu tema/theme dan pilih Edit HTML

Ketiga, cari kode </head> dan copas kode berikut tepat diatas kode </head> (bagi yang sudah paham anda pasti mengetahuinya, anda juga bisa menyimpan kode tersebut di dalam kode head atau style)

<style>
.canvas-box {
    background: linear-gradient(90deg,#00626b 0,#00acc1 50%,#00f7ca 100%);
    position: relative;
    width: 100%;
    height: 500px;
}
.canvas-box amp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.canvas-box h2 {
    font-size: 3.25rem;
    font-weight: bold;
    font-family: inherit;
    text-align: center;
    color: #fff;
    line-height: 1.3;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    z-index: 2;
}
</style>

Keempat, cari kode </header>, setelah itu copas kode berikut dan letakkan diatas kode </header> (selain header juga bisa, sesuai keinginan anda saja)

<div class="canvas-box">
<h2>This is particle canvas on AMP HTML</h2>
  <amp-iframe width="500"
              height="280"
              layout="responsive"
              sandbox="allow-scripts allow-same-origin allow-popups"
              allowfullscreen=""
              frameborder="0"
              noloading=""
              src="https://cdn.staticaly.com/gh/animovi/html/master/particlecanvas-3.html?color=eee">
  <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrr44wnXOUfvhiyjP2zWG3FyPLGQn2AioOpAqit8-87ganr3YLxwAzX_El5ZN13kVLio2eelBmXS5za9iv3qAlEYHpKipw-0SYZqcXYYxd5juJBhJ17Fls2jGikpQGlb40Uj040Doye98/s1600/back-iframe.png"
             layout="fixed-height"
             height="600"
             width="auto"
             placeholder></amp-img>
  </amp-iframe>
</div>

Keterangan: anda bisa mengganti kata "This is particle canvas on AMP HTML" sesuai dengan keinginan anda misalnya saja deskripsi blog anda atau yang lainnya. Adapun untuk kode "eee" merupakan kode color partikelnya. Anda bisa mengubah sesuai dengan keinginan anda.

Kelima, Save Template.

"Untuk anda yang menggunakan template kompi flexible anda bisa copas kode HTML-nya tepat dibawah kode <div class="outer-wrapper"> dan untuk template Viomagz anda bisa copas kode HTML-nya tepat dibawah kode <div id="wrapper">

Membuat Animasi Partikel dengan Canvas di Blog Non AMP HTML

Untuk membuat animasi partikel pada blog Non AMP HTML tentunya akan lebih mudah ketimbang pada blog AMP HTML. Adapun caranya, anda bisa mengikuti langkah-langkah dibawah ini:

Pertama, login blogger

Kedua, menuju menu tema/theme, kemudian pilih Edit HTML

Ketiga, cari kode </head> dan copas kode berikut ini tepat diatasnya.

<style>
#material {width:100%;height:100%}
#material > div{background: none!important}
.canvas-box {background: linear-gradient(90deg,#00626b 0,#00acc1 50%,#00f7ca 100%);position: relative;width: 100%;height: 500px;}
.canvas-box h2 {font-size: 3.25rem;font-weight: bold;font-family: inherit;text-align: center;color: #fff;line-height: 1.3;position: absolute;top: 10%;left: 0;right: 0;z-index: 2;padding:0 10px}
</style>

Ketiga, cari kode </body> jika sudah ketemu letakkan kode berikut ini tepat diatas kode tersebut

<script>
//<![CDATA[
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=');
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return (false);
  }

!function(t){var i="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global;"function"==typeof define&&define.amd?define(["exports"],function(s){i.ParticleNetwork=t(i,s)}):"object"==typeof module&&module.exports?module.exports=t(i,{}):i.ParticleNetwork=t(i,{})}(function(t,i){var s=function(t){this.canvas=t.canvas,this.g=t.g,this.particleColor=t.options.particleColor,this.x=Math.random()*this.canvas.width,this.y=Math.random()*this.canvas.height,this.velocity={x:(Math.random()-.5)*t.options.velocity,y:(Math.random()-.5)*t.options.velocity}};return s.prototype.update=function(){(this.x>this.canvas.width+20||this.x<-20)&&(this.velocity.x=-this.velocity.x),(this.y>this.canvas.height+20||this.y<-20)&&(this.velocity.y=-this.velocity.y),this.x+=this.velocity.x,this.y+=this.velocity.y},s.prototype.h=function(){this.g.beginPath(),this.g.fillStyle=this.particleColor,this.g.globalAlpha=.9,this.g.arc(this.x,this.y,1.5,0,2*Math.PI),this.g.fill()},(i=function(t,i){this.i=t,this.i.size={width:this.i.offsetWidth,height:this.i.offsetHeight},i=void 0!==i?i:{},this.options={particleColor:void 0!==i.particleColor?i.particleColor:"#fff",background:void 0!==i.background?i.background:"#fff",interactive:void 0===i.interactive||i.interactive,velocity:this.setVelocity(i.speed),density:this.j(i.density)},this.init()}).prototype.init=function(){if(this.k=document.createElement("div"),this.i.appendChild(this.k),this.l(this.k,{position:"absolute",top:0,left:0,bottom:0,right:0,"z-index":1}),/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background))this.l(this.k,{background:this.options.background});else{if(!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background))return console.error("Please specify a valid background image or hexadecimal color"),!1;this.l(this.k,{background:'url("'+this.options.background+'") no-repeat center',"background-size":"cover"})}if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor))return console.error("Please specify a valid particleColor hexadecimal color"),!1;this.canvas=document.createElement("canvas"),this.i.appendChild(this.canvas),this.g=this.canvas.getContext("2d"),this.canvas.width=this.i.size.width,this.canvas.height=this.i.size.height,this.l(this.i,{position:"relative"}),this.l(this.canvas,{"z-index":"20",position:"relative",display:"block",margin:"0 auto"}),window.addEventListener("resize",function(){return(this.i.offsetWidth!==this.i.size.width||this.i.offsetHeight!==this.i.size.height)&&(this.canvas.width=this.i.size.width=this.i.offsetWidth,this.canvas.height=this.i.size.height=this.i.offsetHeight,clearTimeout(this.m),void(this.m=setTimeout(function(){this.o=[];for(var t=0;t<this.canvas.width*this.canvas.height/this.options.density;t++)this.o.push(new s(this));this.options.interactive&&this.o.push(this.p),requestAnimationFrame(this.update.bind(this))}.bind(this),500)))}.bind(this)),this.o=[];for(var t=0;t<this.canvas.width*this.canvas.height/this.options.density;t++)this.o.push(new s(this));this.options.interactive&&(this.p=new s(this),this.p.velocity={x:0,y:0},this.o.push(this.p),this.canvas.addEventListener("mousemove",function(t){this.p.x=t.clientX-this.canvas.offsetLeft,this.p.y=t.clientY-this.canvas.offsetTop}.bind(this)),this.canvas.addEventListener("mouseup",function(t){this.p.velocity={x:(Math.random()-.1)*this.options.velocity,y:(Math.random()-.1)*this.options.velocity},this.p=new s(this),this.p.velocity={x:0,y:0},this.o.push(this.p)}.bind(this))),requestAnimationFrame(this.update.bind(this))},i.prototype.update=function(){this.g.clearRect(0,0,this.canvas.width,this.canvas.height),this.g.globalAlpha=6;for(var t=0;t<this.o.length;t++){this.o[t].update(),this.o[t].h();for(var i=this.o.length-1;i>t;i--){var s=Math.sqrt(Math.pow(this.o[t].x-this.o[i].x,2)+Math.pow(this.o[t].y-this.o[i].y,2));s>120||(this.g.beginPath(),this.g.strokeStyle=this.options.particleColor,this.g.globalAlpha=(120-s)/120,this.g.lineWidth=1,this.g.moveTo(this.o[t].x,this.o[t].y),this.g.lineTo(this.o[i].x,this.o[i].y),this.g.stroke())}}0!==this.options.velocity&&requestAnimationFrame(this.update.bind(this))},i.prototype.setVelocity=function(t){return"fast"===t?4:"slow"===t?.33:"none"===t?0:.66},i.prototype.j=function(t){return"high"===t?5e3:"low"===t?2e4:isNaN(parseInt(t,10))?1e4:t},i.prototype.l=function(t,i){for(var s in i)t.style[s]=i[s]},i});
var canvasDiv = document.getElementById("material"),
    options = {
        interactive: !0,
        speed: "fast",
        density: "medium"
    },
    particleCanvas = new ParticleNetwork(canvasDiv, options);
//]]>
</script>

Keempat, cari kode </header> jika sudah ketemu letakkan kode berikut ini tepat diatas kode tersebut

<div class="canvas-box">
<h2>This is particle canvas on AMP HTML</h2>
  <div id='material'/>
</div>

Kelima, jangan lupa ganti nama "This is particle canvas on AMP HTML" dengan deskirpsi blog anda, setelah itu klik Save Template

"Untuk anda yang menggunakan template kompi flexible anda bisa copas kode HTML-nya tepat dibawah kode <div class="outer-wrapper"> dan untuk template Viomagz anda bisa copas kode HTML-nya tepat dibawah kode <div id="wrapper">

Bagaimana mudah bukan?, demikianlah artikel saya terkait Cara Membuat Animasi Partikel dengan Canvas di Blog. Semoga artikel tersebut bermanfaat. Amin.