Blogger Haraketli Bulutlar Yapımı

Blogger Haraketli Bulutlar Yapimi

İnternette gezinirken bulduğum bir eklentiyi sizlerle paylaşıyorum. Görsel yönden iyi ama hız testlerinde 1 puan düşürüyor . Kullanmanızda fayda var diyerekten demo adresini ve kodları sizlere sunayım :)

Demo Adresi : http://arslanmelih.blogspot.com

İlk önce #Css kodlarımızı ekliyoruz :

#cover-cloud{height:200px;left:0;min-width:1074px;position:absolute;width:100%;z-index:0}#cloud{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj21pCQlxL1BkmeQnWGvmcY0NM9Jb83MKvme1eDwlJBqdi-X6zzszIoAXhrilr_xTBm721Tjyd90Wqc-IMUJZuP_utn0KtOtk69geaBKeu760mvgkEBu5h3TW15hwsYOk6z6siDzjKHtnc/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-Otwd4roO0h3_gwBXubb_VagVf2cHHKt3XGrTmqmuc_Dzw7gKDW89SfThiIk6mSl4mAyFHs7c9d8bF4oQ1qLuuh_pBJIHJjn1VH3mMORNIcnxV1icosechEh5qxO6DqAvIheNu4NtV74/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/AVvXsEhYKeGBh42Uwz1aGmVKYsvI33FcrttwqF4dHSnKiMSnFW4aGFKONzdnhxuHgFQUZ2UAhUA2BJXXwj4r06orhdYwkN91BWYwxKgYT4UxNclqSihYaSPqRGOkQ0eCrA1asIMdAe5ofZxLssY/s1600/cloud3.png) repeat-x 0 0;height:46px;position:absolute;width:100%;z-index:3}

Sonrasında </Head> kodunun üstüne alttaki kodları ekliyoruz

<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>

En son olarak <body> kodunun hemen altına ekliyoruz.

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