Iklan

Cara Membuat Efek Animasi Awan Pada Blog

"Cara Membuat Efek Animasi Awan Pada Blog"


   Hay Sobat,  kali ini saya akan postingkan tentang "Cara Membuat Efek Animasi Awan Pada Blog" ,animasi awan ini saya rasa cukup menarik untuk di coba ,membuat tampilan blog sobat mungkin sedikit menarik dengan adanya awan beterbangan di halaman depan membuat kita seakan betah melihatnya. Apakah Sobat penasarn...

Buat sobat yang ingin mencobanya....

Silahkan ikuti tutorialnya di bawah ini :

  1.    Pastikan posisi sobat dalam keadaan login.
  2.    Pilih menu Template > Edit HTML
  3.    Backup dulu untuk menjaga kesalahan,kemudian centang Expand Widget Templates
  4.    Cari Kode ]]></b:skin> gunakan CTRL+F untuk memudahan pencarian
  5.    Copy Kode di bawah dan pastekan di atas kode ]]></b:skin>


 #cover-cloud {
 height: 200px;
 left: 0;
 min-width: 1074px;
 position: absolute;
 width: 100%;
 z-index: 0;
}
#cloud {
 background: url(http://2.bp.blogspot.com/-  pIdaj5t_YMg/T4asjeHwrJI/AAAAAAAADPo/1jFK0WRW4Z0/s1600/cloud1.png) repeat-x 0 0;
 height: 188px;
 position: absolute;
 width: 100%;
 z-index: 1;
}
#cloud2 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_VjQknBak9KLMMsPeLInwVJwCOX1DRjbyaClWSoKqd_XUK9Xx3Bc11x4G_5kHaKuvXpEgiCVkCn2IhySavCt7pG6yULX3Q6hYfELHuYbiYTah-f-3q4GmSMYkVlN1EHGb8uIuxvbw_w/s1600/cloud2.png) repeat-x 0 0;
 height: 125px;
 position: absolute;
 width: 100%;
 z-index: 2;
}
#cloud3 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI0FX5wNiRVapXgxkc9x-TNU70n76KifCx6Zpc_Z0t9v3M22NNVTYVp85sOVINoDtZTbX32LbdkWoNzTGXlocaP0XT771epIAu4zIW13RNShPYgTxFZQQpIDe5KnTDGbQT7HpUDbK3nQ/s1600/cloud3.png) repeat-x 0 0;
 height: 46px;
 position: absolute;
 width: 100%;
 z-index: 3;
}


Copas kode DISINI

   6.   Kemudian cari lagi kode </head> dan letakan kode di bawah tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
(function(e) {
    e._spritely={animate: function(t){var n=e(t.el);
    var r=n.attr("id");if(!e._spritely.instances){e._spritely.instances={
}}
if(!e._spritely.instances[r]) {
    e._spritely.instances[r]={current_frame: -1;
}}
var i=e._spritely.instances[r];if(t.type=="sprite") {
    var s;var o=function(n){var i=t.width,o=t.height;if(!s){s=[];total=0;for(var u=0;u<t.no_of_frames;u++){s[s.length]=0-total;total+=i;
}}
if(e._spritely.instances[r]["current_frame"]>=s.length-1) {
    e._spritely.instances[r]["current_frame"]=0;
}
else {
    e._spritely.instances[r]["current_frame"]=e._spritely.instances[r]["current_frame"]+1;
}
n.css("background-position",s[e._spritely.instances[r]["current_frame"]]+"px 0");if(t.bounce&&t.bounce[0]>0&&t.bounce[1]>0) {
    var a=t.bounce[0];var f=t.bounce[1];var l=t.bounce[2];n.animate({top: "+="+a+"px",left:"-="+f+"px";
},l).animate( {
    top: "-="+a+"px",left:"+="+f+"px";
},l);
}};
o(n);
}
else if(t.type=="pan") {
if(t.dir=="left"){e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]-(t.speed||1)||0;
}
else {
e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]+(t.speed||1)||0;
}
if(e.browser.msie) {
var u=e(n).css("background-position-y")||"0";e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u);
}
else {
var u=(e(n).css("background-position").split(" ")||" ")[1];e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u);
}}},randomIntBetween:function(e,t) {
return parseInt(rand_no=Math.floor((t-(e-1))*Math.random())+e);
}};
e.fn.extend( {
spritely: function(t){var t=e.extend({type:"sprite",do_once:false,width:null,height:null,fps:12,no_of_frames:2;
},t|| {
});
t.el=this;t.width=t.width||e(this).width()||100;t.height=t.height||e(this).height()||100;var n=function() {
return parseInt(1e3/t.fps);
};
if(!t.do_once) {
window.setInterval(function(){e._spritely.animate(t);
},n(t.fps));
}
else {
e._spritely.animate(t);
}
return this;
},sprite:function(t) {
var t=e.extend({type: "sprite",bounce:[0,0,1e3];
},t|| {
});
return e(this).spritely(t);
},pan:function(t) {
var t=e.extend({type: "pan",dir:"left",continuous:true,speed:1;
},t|| {
});
return e(this).spritely(t);
},flyToTap:function(t) {
var t=e.extend({el_to_move: null,type:"moveToTap",ms:1e3,do_once:true;
},t|| {
});
if(t.el_to_move) {
e(t.el_to_move).active();
}
if(e._spritely.activeSprite) {
if(window.Touch){e(this)[0].ontouchstart=function(t){var n=e._spritely.activeSprite;var r=t.touches[0];var i=r.pageY-n.height()/2;var s=r.pageX-n.width()/2;n.animate({top: i+"px",left:s+"px";
},1e3);
}}
else {
e(this).click(function(t){var n=e._spritely.activeSprite;e(n).stop(true);var r=n.width();var i=n.height();var s=t.pageX-r/2;var o=t.pageY-i/2;n.animate({top: o+"px",left:s+"px";
},1e3);
})}}
return this;
},active:function() {
e._spritely.activeSprite=this;return this;
},activeOnClick:function() {
var t=e(this);if(window.Touch){t[0].ontouchstart=function(n){e._spritely.activeSprite=t;
}}
else {
t.click(function(n){e._spritely.activeSprite=t;
})}
return this;
},spRandom:function(t) {
var t=e.extend({top: 50,left:50,right:290,bottom:320,speed:4e3,pause:0;
},t|| {
});
var n=e(this).attr("id");var r=e._spritely.randomIntBetween;var i=r(t.top,t.bottom);var s=r(t.left,t.right);e("#"+n).animate( {
top: i+"px",left:s+"px";
},t.speed);window.setTimeout(function() {
e("#"+n).spRandom(t);
},t.speed+t.pause);return this;
},makeAbsolute:function() {
return this.each(function(){var t=e(this);var n=t.position();t.css({position: "absolute",marginLeft:0,marginTop:0,top:n.top,left:n.left;
}).remove().appendTo("body");
})}})})(jQuery);try {
document.execCommand("BackgroundImageCache",false,true);
}
catch(err) {
}//]]></script>
<script type='text/javascript'>(function($) {
$(document).ready(function(){$('#cloud').pan({fps: 30, speed: 1, dir: 'right';
});$('#cloud2').pan( {
fps: 30, speed: 2, dir: 'right';
});$('#cloud3').pan( {
fps: 30, speed: 0.5, dir: 'right';
});});})(jQuery);</script>

Copas kode DISINI

   7.   Dan Terakhir cari kode <body> kemudian letakan kode di bawah tepat di bawah kode <body>

<div id='cover-cloud'>
<div id='cloud'/>
<div id='cloud2'/>
<div id='cloud3'/>
</div>

Copas kode DISINI

Setelah semuanya selesai kemudian save dan lihat hasilnya....

   Nah, sekian artikel dari saya tentang "Cara Membuat Efek Animasi Awan Pada Blog" Semoga bisa bermanfaat untuk kita semua../

"Terima Kasih"

Komentar