loading...

Wednesday, November 17, 2010

How to add Scrolling background to blogger using jquery

Previously i have done a tutorial on how to animate the header of the blogger using spritely a javascript animation plugin for jquery. theirs even a template with the animation effect where you could download it  Spritely template for blogger.Today i am going to use spritely javascript animation image effect with jquery to scroll the background.Scrolling background makes your visitors feel different while visiting your site.So lets start on how to add a Scrolling background to background using spritely.
A online Demo of Scrolling in blogger

How to Add
Step1
Add the latest jquery and Spritely js files above the </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script src='http://www.spritely.net/lib/jquery/1.3.2/plugins/jquery.spritely-0.2.1.js' type='text/javascript'></script>


Step2
Add the following code above the </body>
<script type='text/javascript'>

$('body').pan({fps: 30, speed: 2, dir: 'left'});

</script>

Thats it so simple isn't it.The main function that does the trick is the pan()
You can Change the
frames per second,
speed and 
either left or right direction.

if you want to extend the code more exclusively like changing the background according to the time change.That is Day effect scrolling background when the visitors time is day and same for afternoon,evening and night.
Here is the code to implement it .
<script type='text/javascript'>

$(document).ready(function() {

var d = new Date();

var h = d.getHours();




if (h <= 3)

{

$('body').css("background-image","url('scrolllatenight.jpg')");

}

else if (h > 3 && h < 12)

{

$('body').css("background-image","url('scrollday.jpg')");

}

else if (h >=12 && h <= 16)

{

$('body').css("background-image","url('scrollafternoon.jpg')");

}

else

{

$('body').css("background-image","url('scrollevening.jpg')");

}

});

</script>

No comments:

Post a Comment

fuzionpro Headline

fuzionpro