How to Add Passing Clouds Animated Background Effect to Blogger

How to Add Passing Clouds Animated Background Effect to Blogger

Password = 1234

How to Add Passing Clouds Animated Background Effect to Blogger blogs Using jQuery

You might have seen a similar animated background effect in other Blogger blogs. This passing clouds animated background effect is achieved by using jQuery. I have added GIF file to show you the animation, it has small number of frames so the animation ends abruptly in the middle and goes back to first frame, but the real animated background effect has seamless animation you don’t find it stopping at the middle.
This super cool animated background was created by Cats Who Code. After tweaking the code this passing clouds animated background effect can be added to the Blogger blogs easily. Lets see how we can add this super cool animated background effect to Blogger/blogspot blogs.

1. Go to Blogger > Template > Edit HTML.

2. Now press Ctrl + F and find body{ this is the starting for body styling, now replace the background with the below code.

background:#c1deee url(https://lh4.googleusercontent.com/-bH9AzBUEiTc/UQW6yyxXtUI/AAAAAAAAAwI/8JRy5jzq4Ps/s912/JD8mWs7.png) repeat-x scroll top left;

3. Make sure to upload image to your own server for future safety. Now your background is set we just
 need to give it some nice animated motion.  Copy the below code and paste it above the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> <script charset='utf-8' type='text/javascript'>var scrollSpeed=70;var step=1;var current=0;var imageWidth=2247;var headerWidth=800;var restartPosition=-(imageWidth - headerWidth);function scrollBg(){current -=step;if (current==restartPosition){current=0;}$(&#39;body&#39;).css(&quot;background-position&quot;,current+&quot;px 0&quot;);}var init=setInterval(&quot;scrollBg()&quot;, scrollSpeed)</script>

4. If you already have jQuery script added to your Blogger template then delete the jQuery script (in the above code which is in the 1st line).

5. Now you are done. Refresh the page you will see animated background.
I liked this effect very much, if you do so please let me know in the comments below.

Password = 1234

How to Add Passing Clouds Animated Background Effect to Blogger