Membuat Javascript Animated Canvas Background Seperti Kode Jarwo
Animated Canvas Background Kode Jarwo

Setelah Blog Kode Jarwo berganti template menjadi bergaya material, banyak teman-teman saya yang mengatakan keren. Sayang, yang keren templatenya, bukan saya...

Setelah saya tanya lagi bagian mana yang keren, ternyata ada satu hal yang sangat mencolok di blog saya, yang membedakan dengan blog yang lain, sehingga digolongkan sebagai template "keren". Apa itu? Ternyata adalah bagian kalimat pembuka yang ada di Blog Kode Jarwo.

Berikut penampakannya:

Contoh Kalimat Pembuka Kode Jarwo

Yang membuat keren adalah, jika anda mengarahkan kursor ke dalam canvas (saya menyebutnya canvas) itu, dan mengklik di mana saja, maka akan terbentuk jaring-jaring baru yang saling berkaitan.

Tapi jangan terlalu banyak klik, nanti kebanyakan jaring dan hasilnya laptop anda malah nge-lag.

Untuk yang ingin mencobanya langsung, silakan tekan tombol DEMO dibawah ini:


Bagi anda yang ingin memasangnya, mungkin harus dibekali sedikit pemahaman dasar tentang HTML. Silakan anda rencanakan dulu, dimana anda ingin menempatkan canvas ini, entah dibawah header, di dalam postingan, atau bisa juga melalui tata letak, dengan menambahkan widget HTML/JavaScript baru.

Berikut kodenya, silakan anda tempatkan dimana saja yang anda mau:

<style>
#jarwocanvas {
    position: relative;
    height:100%;
    max-width:100%
}
canvas {
  background-position: center;
  transition: background 3s;
}
canvas:active {
  background-color:#039BE5;
  background-size: 100%;
  transition: background 0s;
}
</style>
<div id="jarwocanvas">
</div>
<script type="text/javascript">//<![CDATA[
!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("jarwocanvas"),
    options = {
        particleColor: "#eee",
        background: "#786de4",
        interactive: !0,
        speed: "fast",
        density: "medium"
    },
    particleCanvas = new ParticleNetwork(canvasDiv, options);
//]]></script>

Sebenarnya ini bukan kode asli 100% buatan saya, sebagian saya mengambilnya dari Google, tapi lupa dari situs apa...
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 3 Agustus 2018 21.11

Saya dah coba di blog orang lain sama blog ini kok bisa sih :D

Balas
David J. Prasetyo Kode Jarwo
David J. Prasetyo
# 3 Agustus 2018 19.55

Ngeblank om....

Balas
Ismy NR Kode Jarwo
Ismy NR
# 25 Juli 2018 07.51

Pantesaan saat saya iseng(penasaran) klik2 jaring-jaring itu malah semakin banyak :), trus saya lanjut baca artikelnya malah hp jadi lag

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 24 Mei 2018 23.02

Langsung tempel

Balas
arif Kode Jarwo
arif
# 24 Mei 2018 17.17

Ini langsung tempel atau harus diedit dulu bagian #kodejarwo nya?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 20 April 2018 16.18

Sudah saya update artikelnya

Balas
Wahyu Kode Jarwo
Wahyu
# 19 April 2018 12.17

cara menambahkan kode div id="jarwocanvas"> </div di layout gmn ya?

Balas
Ito Indrawan Kode Jarwo
Ito Indrawan
# 13 April 2018 22.07

ngeblank gan

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 10 April 2018 19.44

Taruh kode div nya (di langkah terakhir) jangan di dalam tag head. Taruh di dalam area tag <body> sampe </body> aja...

Balas
Ayano Awang Kode Jarwo
Ayano Awang
# 10 April 2018 19.16

kalo muncul notif "div should not appear inside of head" gimana gan?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 5 April 2018 07.16

Saya sudah coba bisa. Nanti saya cek lagi.

Balas
Muhammad Fahri Kode Jarwo
Muhammad Fahri
# 5 April 2018 01.20

kok ngeblank om?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 4 April 2018 05.37

Oke

Balas
Naufal Muhammad Al Hikam Kode Jarwo
Naufal Muhammad Al Hikam
# 4 April 2018 00.44

Mantaf Qolbu :D .... comot ah...

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 3 April 2018 10.22

Kurang lebih 10KB ukurannya, tapi nda bakal nambah masalah baru/kurangi skor di PageSpeed Insights.

Balas
Tipe Mikir Kode Jarwo
Tipe Mikir
# 3 April 2018 10.18

itu bakal nambah beban load ngga mas ?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 2 April 2018 15.02

Hapus tag kondisional di atasnya

Balas
Muhammad Fahri Kode Jarwo
Muhammad Fahri
# 1 April 2018 22.38

kalo di jarwo v2 biar kode yg kotak satu, kotak duanya juga tampil di artikel gimana om?

Balas