Moving and Draggable Image

by Flo Fromager

HTML

<div id="sky">
    
    <img class="cloud c1"
         data-top="30" data-top-end="30"
         data-left="-200" data-left-end="60px"
         src="http://www.scalabilityexperts.com/images/global_images/icons/cloud.png" />
         
    <img class="cloud c2"
         data-top="30" data-top-end="30"
         data-left="-200" data-left-end="200px"
         src="http://www.scalabilityexperts.com/images/global_images/icons/cloud.png" /> 
  
</div>

CSS

body {
    background: #6CF;
    overflow-x: hidden;
}

#sky { 
    height: 1000px;
    width: 100%;
    position: relative;
}

.cloud {
    position: absolute;
}

.c1 {
    top: 20px;
}

.c2 {
    top: 100px;
}

JavaScript

var cloud = $('.cloud');

function animateCloud() {
    $(cloud).animate({
        left: $(this).data("left-end")
    }, 25000, function() {
        $(this).css({
            left: '0'
        });
        animateCloud();
    });

}


animateCloud();

$(cloud).hover(function() {
    $(this).stop().draggable().css("cursor","pointer"); //if dragged above 300px, it will animate backwards
}, function() {
    animateCloud();
});