Cara membuat animasi down image diblogger

Hello sobat icloudzer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat animasi down image di blogger, atau animasi gambar berjatuhan terbaru dan sangat keren jika di terapkan di dalam website kamu

Animasi down image

Sesuai namanya animasi down image merupakan sebuah tampilan animasi dari sebuah gambar dengan efek animasi berjatuhan layaknya bunga berguguran, dengan menerapkan animasi down image di website akan membuat website semakin keren pastinya

Gambar custom

Sebenarnya animasi yang di tampilkan adalah sebuah gambar yang efeknya itu di buat menggunakan kode javascript, namun kode javascript yang admin berikan nantinya telah di enkripsi sehinga anda tidak bisa mengubah source kode apapun di dalamnya

Menggunakan Javascript

Dalam proses pembuatan animasi down image tersebut 100% di buat menggunakan javascript tanpa ada unsur pembuatan dari kode lainnya semisal CSS dan HTML alias murni menggunakan kode javascript, bagaimana dengan performa blog jika menerapkan animasi down image tersebut? sejauh ini saat admin menerapkan animasi down image tidak ada kendala yang signifikan terhadap performa blog, tetapi iika blog sudah memuat data source semisal script yang banyak pastinya akan mempengaruhi performa blog juga

Seperti Hujan

Yang uniknya dari tampilan animasi down image tersebut adalah saat muncul akan seperti hujan yang berjatuhan, animasi tersebut adalah gambar yang berjatuhan layaknya hujan, itulah mengapa disebut sebagai animasi down image yang sangat menakjubkan seperti contoh tampilan dari efek animasi down image yang sedang kami lihat di blog icloudice.com

Cara pembuatan

Baiklah tanpa berbasa basi lagi Admin bakalan menjelaskan mengenai bagaimana caranya membuat animasi down image di blogger, pelajari secara seksama cara membuat animasi down image tersebut

Source Kode

Salin aja kode javascript di bawah ini kemudian letakkan di atas kode </head>

<script type="text/javascript">
 //<![CDATA[
 var _0xa5bd=["\x68\x74\x74\x70\x73\x3A\x2F\x2F\x31\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x43\x62\x33\x70\x32\x6D\x66\x33\x71\x6D\x45\x2F\x59\x54\x55\x55\x76\x76\x74\x46\x2D\x51\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x4B\x59\x77\x2F\x41\x4A\x73\x47\x77\x64\x62\x57\x75\x50\x55\x6B\x6E\x67\x73\x67\x2D\x46\x4D\x4E\x5A\x44\x48\x4C\x36\x4A\x70\x48\x71\x31\x55\x33\x67\x43\x4E\x63\x42\x47\x41\x73\x59\x48\x51\x2F\x73\x30\x2F\x34\x5F\x32\x30\x32\x31\x30\x39\x30\x36\x5F\x30\x32\x30\x32\x30\x35\x5F\x30\x30\x30\x33\x2E\x70\x6E\x67","\x6E\x75\x6D\x62\x65\x72","\x72\x6F\x75\x6E\x64","\x6C\x61\x79\x65\x72\x73","\x3C\x6C\x61\x79\x65\x72\x20\x69\x64\x3D\x22\x73\x6E\x46\x6C\x6B\x44\x69\x76","\x22\x3E\x3C\x69\x6D\x67\x73\x72\x63\x3D\x22","\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22","\x22\x77\x69\x64\x74\x68\x3D\x22","\x22\x20\x61\x6C\x74\x3D\x22\x2A\x22\x20\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x3E\x3C\x2F\x6C\x61\x79\x65\x72\x3E","\x77\x72\x69\x74\x65","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x20\x7A\x2D\x69\x6E\x64\x65\x78\x3A\x39\x39\x39\x39\x3B\x22\x69\x64\x3D\x22\x73\x6E\x46\x6C\x6B\x44\x69\x76","\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x22\x68\x65\x69\x67\x68\x74\x3D\x22","\x22\x20\x77\x69\x64\x74\x68\x3D\x22","\x22\x20\x61\x6C\x74\x3D\x22\x2A\x22\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x3E\x3C\x2F\x64\x69\x76\x3E","\x72\x61\x6E\x64\x6F\x6D","\x73\x6E\x46\x6C\x6B\x44\x69\x76\x30","\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68","\x69\x6E\x6E\x65\x72\x48\x65\x69\x67\x68\x74","\x64\x6F\x63\x75\x6D\x65\x6E\x74\x45\x6C\x65\x6D\x65\x6E\x74","\x63\x6C\x69\x65\x6E\x74\x57\x69\x64\x74\x68","\x63\x6C\x69\x65\x6E\x74\x48\x65\x69\x67\x68\x74","\x62\x6F\x64\x79","\x70\x61\x67\x65\x59\x4F\x66\x66\x73\x65\x74","\x73\x63\x72\x6F\x6C\x6C\x4C\x65\x66\x74","\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70","\x73\x6E\x46\x6C\x6B\x44\x69\x76","\x73\x74\x79\x6C\x65","\x63\x68\x69\x6C\x64\x4E\x6F\x64\x65\x73","\x70\x78","\x74\x6F\x70","\x6C\x65\x66\x74","\x73\x69\x6E","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x61\x6C\x6C","\x66\x6C\x61\x6B\x65\x46\x61\x6C\x6C\x28\x29\x3B","\x73\x65\x74\x49\x6E\x74\x65\x72\x76\x61\x6C"];var pictureSrc=_0xa5bd[0];var pictureWidth=15;var pictureHeight=15;var numFlakes=10;var downSpeed=0.01;var lrFlakes=10;if( typeof (numFlakes)!= _0xa5bd[1]|| Math[_0xa5bd[2]](numFlakes)!= numFlakes|| numFlakes< 1){numFlakes= 10};for(var x=0;x< numFlakes;x++){if(document[_0xa5bd[3]]){document[_0xa5bd[9]](_0xa5bd[4]+ x+ _0xa5bd[5]+ pictureSrc+ _0xa5bd[6]+ pictureHeight+ _0xa5bd[7]+ pictureWidth+ _0xa5bd[8])}else {document[_0xa5bd[9]](_0xa5bd[10]+ x+ _0xa5bd[11]+ pictureSrc+ _0xa5bd[12]+ pictureHeight+ _0xa5bd[13]+ pictureWidth+ _0xa5bd[14])}};var xcoords= new Array(),ycoords= new Array(),snFlkTemp;for(var x=0;x< numFlakes;x++){xcoords[x]= (x+ 1)/ (numFlakes+ 1);do{snFlkTemp= Math[_0xa5bd[2]]((numFlakes- 1)* Math[_0xa5bd[15]]())}while( typeof (ycoords[snFlkTemp])== _0xa5bd[1]);;ycoords[snFlkTemp]= x/ numFlakes};function flakeFall(){if(!getRefToDivNest(_0xa5bd[16])){return};var _0x37fdxc=0,_0x37fdxd=0,_0x37fdxe=0,_0x37fdxf=0;if( typeof (window[_0xa5bd[17]])== _0xa5bd[1]){_0x37fdxc= window[_0xa5bd[17]];_0x37fdxd= window[_0xa5bd[18]]}else {if(document[_0xa5bd[19]]&& (document[_0xa5bd[19]][_0xa5bd[20]]|| document[_0xa5bd[19]][_0xa5bd[21]])){_0x37fdxc= document[_0xa5bd[19]][_0xa5bd[20]];_0x37fdxd= document[_0xa5bd[19]][_0xa5bd[21]]}else {if(document[_0xa5bd[22]]&& (document[_0xa5bd[22]][_0xa5bd[20]]|| document[_0xa5bd[22]][_0xa5bd[21]])){_0x37fdxc= document[_0xa5bd[22]][_0xa5bd[20]];_0x37fdxd= document[_0xa5bd[22]][_0xa5bd[21]]}}};if( typeof (window[_0xa5bd[23]])== _0xa5bd[1]){_0x37fdxe= pageYOffset;_0x37fdxf= pageXOffset}else {if(document[_0xa5bd[22]]&& (document[_0xa5bd[22]][_0xa5bd[24]]|| document[_0xa5bd[22]][_0xa5bd[25]])){_0x37fdxe= document[_0xa5bd[22]][_0xa5bd[25]];_0x37fdxf= document[_0xa5bd[22]][_0xa5bd[24]]}else {if(document[_0xa5bd[19]]&& (document[_0xa5bd[19]][_0xa5bd[24]]|| document[_0xa5bd[19]][_0xa5bd[25]])){_0x37fdxe= document[_0xa5bd[19]][_0xa5bd[25]];_0x37fdxf= document[_0xa5bd[19]][_0xa5bd[24]]}}};for(var x=0;x< numFlakes;x++){if(ycoords[x]* _0x37fdxd> _0x37fdxd- pictureHeight){ycoords[x]= 0};var _0x37fdx10=getRefToDivNest(_0xa5bd[26]+ x);if(!_0x37fdx10){return};if(_0x37fdx10[_0xa5bd[27]]){_0x37fdx10= _0x37fdx10[_0xa5bd[27]]};var _0x37fdx11=document[_0xa5bd[28]]?_0xa5bd[29]:0;_0x37fdx10[_0xa5bd[30]]= (Math[_0xa5bd[2]](ycoords[x]* _0x37fdxd)+ _0x37fdxe)+ _0x37fdx11;_0x37fdx10[_0xa5bd[31]]= (Math[_0xa5bd[2]](((xcoords[x]* _0x37fdxc)- (pictureWidth/ 2))+ ((_0x37fdxc/ ((numFlakes+ 1)* 4))* (Math[_0xa5bd[32]](lrFlakes* ycoords[x])- Math[_0xa5bd[32]](3* lrFlakes* ycoords[x]))))+ _0x37fdxf)+ _0x37fdx11;ycoords[x]+= downSpeed}}function getRefToDivNest(_0x37fdx13){if(document[_0xa5bd[3]]){return document[_0xa5bd[3]][_0x37fdx13]};if(document[_0x37fdx13]){return document[_0x37fdx13]};if(document[_0xa5bd[33]]){return document[_0xa5bd[33]](_0x37fdx13)};if(document[_0xa5bd[34]]){return document[_0xa5bd[34]][_0x37fdx13]};return false}window[_0xa5bd[36]](_0xa5bd[35],100)//]]>
</script>

Info: Jagan mencoba untuk mengedit source kode tersebut, nanti tampilan animasi down imagenya ngak akan muncul sob, sekoga bermanfaat