Monday, February 13, 2012

JQuery Moving background Image

Today I’m going to explain about how to make JQuery moving background image.
Here it goes…
Step1: Download these two files: jquery-1.3.1.min.js and jquery.bgscroll.js Link this to your html file.
Step2: call below function:

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.bgscroll.js"></script>
<script type="text/javascript" language="javascript">
$( function() {
$('.clouds1').bgscroll({direction:'v' });
$('.clouds2').bgscroll({scrollSpeed:5 , direction:'h' });
$('.clouds3').bgscroll({scrollSpeed:10, direction:'d'});

Step3: put below style in css file
.clouds{background:#3e83c8 url(images/875-cloud_article.jpg) repeat-x 0 bottom; width:564px; height:310px; float:left; border:2px solid #ccc; margin:10px;}
Step:write below single line code inside body tag
<div class="clouds"></div>

NOTE: Please comment on it. if you are facing Problem.