jquery horizontal panning clouds

Question

I have an image of clouds which is set to take up 100% width of the screen. I want to be able to pan it, similar to the way the "Spritely" plugin can pan clouds continuously, however, I'm not using Spritely because this is not a "background image". I hope this makes sense.

My code for the image:

   <div id="clouds" style="position:absolute; z-index:99; width:100%; top:56.5%;">
   <div id="clouds1" style="width:auto;overflow:hidden; position:relative; z-index:99; left:0%;">
   <img src="Images/clouds.png" style="width:100%" />
   </div>
   </div>

Using the image this way allows me to have it scalable to the browser size.

Can someone help me figure out how to continuously pan this image?

Thank you so much for your time!

James

score 0 · Answer 1 · answered Mar 15 '13 at 23:44

0

I think you would benefit from searching for solutions using the term 'paralax horizontal scrolling'.

You should be able to find tutorial such as

http://www.egstudio.biz/easy-parallax-with-jquery/

Which can be tweaked to be responsive.

answered Mar 15 '13 at 23:44

rath3r

323
1
6
19

Thanks for your reply! I appreciate the assistance, but I'm not looking for a parallax effect, (maybe sometime in the future.) I'm just trying to find a way to have my clouds continuously pan from right to left across the screen (or left to right.) I also don't want this to be controlled by the mouse like with parallax scrolling. I just want the clouds to always cycle horizontally across the screen. – James Barracca Mar 16 '13 at 01:06

score 0 · Answer 2 · answered Apr 12 '13 at 02:59

I had this exact same problem. I didn't use it with clouds, but it can be easily implemented, and only 4 lines of code.

HTML

<div class="slideshow">  
        <ul>
            <li><img src="img1.jpg" alt="jQuery" width="350" height="200" /></li>
            <li><img src="img2.jpg" alt="Infinite Slideshow" width="350" height="200" /></li>
            <li><img src="img3.jpg" alt="only 4 lines of code" width="350" height="200" /></li>
            <li><img src="img4.jpg" alt="www.creativejuiz.fr" width="350" height="200" /></li>
        </ul>  
    </div>

CSS

/* slideshow styles */
.slideshow {  
   width: 350px;  
   height: 200px;  
   margin: 3em auto;
   overflow: hidden;
   border: 3px solid #f2f2f2;
}  
.slideshow ul {  
   width: 400%;  
   height: 200px;
   padding:0; margin:0;
   list-style:none;
}  
.slideshow li { float: left; }

JQuery

$(function(){
   setInterval(function(){
      $(".slideshow ul").animate({marginLeft:-350},800,function(){
         $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
      })
   }, 3500);
});

Source - http://creativejuiz.fr/blog/doc/infinite-slideshow/

jquery horizontal panning clouds

2 Answers2