JSFiddle - React, Tailwind, and code Playground
HTML
<div class="zeppelin"></div>
CSS
.zeppelin{
background:url(http://3.bp.blogspot.com/_k3UqzQLD6qY/TSz6H2YdkUI/AAAAAAAABx8/DOJrUoJnTWA/s1600/LZ%2B127%2B-%2BGraf%2BZeppelin.jpg) black no-repeat;
display:block;
width:450px;
height:313px;
position:absolute;
right:-100%;
top:200px;
}
JavaScript
var z = 10;
var winWidth = window.innerWidth;
var zepWidth = $('.zeppelin').innerWidth();
ledZep();
function check(){
console.log('check');
console.log(winWidth);
console.log($('.zeppelin').css('right'));
if($('.zeppelin').css('right') > winWidth){
console.log('check if');
console.log($('.zeppelin').css('right'));
z = 10;
console.log(z);
$('.zeppelin').css({'right' :'-'+zepWidth });
}
};
function ledZep(){
$('.zeppelin').animate({
right: z+"px"
}, 200, function(){
ledZepUp(z)
});
};
function ledZepUp(z){
check();
z = z+100;
$('.zeppelin').animate({
right: z+"px",
top: "120px"
}, 200, function(){
ledZepDown(z)
});
};
function ledZepDown(z){
check();
z = z+100;
$('.zeppelin').animate({
right: z+"px",
top: "200px"
}, 200, function(){
ledZepUp(z)
});
};