Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Alex Flores
Alex Flores
7,864 Points

jQuery cloud loop (left to right) not working well. Would appreciate help

Hello all,

So I'm having trouble with getting this loop to work the way I want it to. I have it working, as you'll see in the jsfiddle (https://jsfiddle.net/alexflores67/rssffLdp/2/#&togetherjs=BHy1eDiVVH). I'm trying to take a simple cloud picture and make it go from left to right in a continuous loop. However, I want the cloud to start offscreen from the left and end past the screenview on the right so it looks natural. I have this effect, but it's also increasing the scroll bar.

Also, I tried recreating the issue on jsfiddle, but I couldn't, on my site, which is locally hosted so I can't share at the moment, the navigation links won't allow me to click on them until the cloud has reached a certain point in the screen. Does anyone know why this might be?

Any help would be much appreciated.

3 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: Here's a few ideas:

  • To start offscreen, your initial left setting needs to be the negative of the image width.
  • Absolute position cannot be constrained by the parent's "overflow" setting, use relative instead.
  • The outer container needs to be the full width of the screen.
  • The final position doesn't need to be an offset, just a value to place it offscreen.
  • You don't need to fade or hide if the image is offscreen.
  • You can create a single animation chain instead of having two going at once.
function repeat() {
    $("#clouds").delay(500).css({ left: "-150px" })
                .animate({ left: '110%' }, 2000, repeat);
}

.container {
    width: 100%;
    overflow: hidden;
}
#clouds {
    position: relative;
    width: 200px;
}
Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

I've had a lot of people take a look at this, but no one has been able to figure it out. I posted it on Stackoverflow and no one was able to fix it either. However, I did get a good CSS only alternative that I thought I'd post. Here's the js fiddle https://jsfiddle.net/alexflores67/eujL0kuu/#&togetherjs=6B8LQxadLx

I had actually done the CSS method before, but for some reason couldn't get the responsive image to work out the way I wanted it to - kept doing this back to the future warpdrive thing. Perhaps I need to go back and take some CSS courses...

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

It seems to work well for me after making the changes I suggested, although it could be streamlined even a bit more.

In the CSS - Beyond the Basics course you create a cute animation with a boat floating down a river, This would be very much in line with your cloud animation, if you wanted to see how to do it with CSS instead of JavaScript.

Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

Apologies, Steven, I actually had not seen your post when I wrote that. I got it working using your suggestions as well. I really appreciate it! You've been a tremendous help to me.