Well my earlier posted animated background was my first discovery as I was finding out this thing for a while, I loved this effect as I saw it on one of the blogger blog, so I wished i could have the same effect so I tried to rip the effect from that blog and I did it earlier but in my earlier version I thing adding animation effect to body image was making my blog little bit slower in scrolling so I started to find how I can fix that thing or maybe I could some another modified version, so this one is really awesome, and yes it is ripped from a paid blogger template. So if you also love this effect well check out below steps to get it on your blog too.
Wanna check out demo ?
Well if you are wondering that if you could see a demo for this effect, well at this time of posting this post I am using this effect so you might be able to see this effect working, above image might be clear :( but if you are late reader then you might not be able to see as I might remove this effect anytime or may not, so that depends.
Adding Animated Background to Blogger Blog's
So now lets get started with the steps on adding this stuff to your blogger blog, well let me remind every tutorial or widget we post for blogger will surely work for wordpress too, so if you are using Wordpress you can follow the same ways in your own style and add this effect to your wordpress blog too, well I cannot give brief steps on adding this step to wordpress as I have not used wordpress and I do not know much about it.
- Open Blogger > Template > Edit HTML.
- Now press
Ctrl +F & search for]]></b:skin>tag and paste below code right above it.#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/AVvXsEjOXkBZOSaJ6N-e4r2ylLw3mawQtvLFz_wVMizjz_CA87PxcA9ZAUj7G6Ldx11J2oTdXFXgMrBhutbvGDZXzNvesoJuAf_ZUR3F7Q1DkvozpVgl8xIV9tdhNyJOdtaGhY2NsgiW2JGsZ_k/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/AVvXsEgc2s8Z9LwU-OJujYBExHYRQU6BaXbFW0hcFW3JNTy8MCLHYPxXfg7jFI10e6Nf5hQ83i1aqmqbzoH6SzhILEjeSCfl9i2zOwhBM8jKRs2XxE6gp4YBxHy218y8vb7E7Ybr4CzugcA8a7s/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/AVvXsEi6fpNkVl3Sbwpc9E7em8QNkt5-AGVaG9B76JfD-BoSfbpDnRiACUpwmVroX5btPD5eWMB1kqJK67YSff0P4x5LGIS2KtD0P1At2Mhei8nrLy9WLdRp9GBhtTKxENKyk8siZPO64wxD67Q/s1600/cloud3.png) repeat-x 0 0;height:46px;position:absolute;width:100%;z-index:3}
- Make sure to upload these images to your own server in case these are deleted in future you will have a backup, you can even change the images with your own.
- Now search for
</head>tag and paste below code above it.<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>
- The above number in blue color is the speed of clouds how fast they travel, so you can change them up accordingly.
- Now lastly search for
<body>and paste below code right below it.<div id='cover-cloud'><div id='cloud'/><div id='cloud2'/><div id='cloud3'/></div>
- So now you have added CSS Styles, Script to execute this effect and HTML to show this effect anywhere you want on your blog. So basically adding it right below the <body> tag will display it right on top like I am using.
- So now just Save Template and refresh your blog to see this awesome effect, if you have any issue's with CSS you can fix them up if you have some CSS knowledge.
That's it I think you might be able to use this effect on blogger and wordpress blogs, well if you face any problems do comment I would be happy to help you out.
(COMMENTS WILL LOAD AUTOMATICALLY)