Twigs Twigs - 6 months ago 10
jQuery Question

Animate element position loop

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). However, 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.

CSS

.container {
width: 200px;
height: auto;
overflow: hidden;
}
#clouds {
position:absolute;
width: 200px;
}

#cloud-img {
width: 100%;
height: auto;
margin-left: -30%;

}


JS
$(document).ready(function() {

function repeat() {
$("#clouds").css({"left":0}).show();
$("#clouds").animate({left:'+=110%'},2000);
$('#clouds').delay(500).fadeOut(500,repeat);
}

repeat();
});

$("#test").click(function() {
alert('hello');
});

Answer

CSS only, here you go!

.container {
  position: relative; /* don't forget to set position  */
  overflow: hidden;
  height: 180px;
 }

#cloud-img{
  position: absolute;
  width: 200px;
  top:0; left:0;
          transform: translateX(-200px);
  -webkit-transform: translateX(-200px);
          animation: cloud 2s linear infinite;
  -webkit-animation: cloud 2s linear infinite;
}

@keyframes         cloud { to{         transform: translateX(100vw); } }
@-webkit-keyframes cloud { to{ -webkit-transform: translateX(100vw); } }
<div class="container">
  <img id="cloud-img" src="http://i.stack.imgur.com/OUVqO.jpg" alt="cloud">
</div>