JSFiddle - React, Tailwind, and code Playground

by Zareh Geertjes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>

<div class="banner"></div>

JavaScript

function flyplanefly(){
		$("<img />", {
    	src: "http://pngimg.com/upload/plane_PNG5234.png",
    	css: {
        "position": "absolute",
        "width" : "300px"
    	},
      id: 'plane',
    }).appendTo('.banner');

		ww = $( window ).width();
    posR = ww;
    speed = ww*10;
        
    function go() {
         $("#plane").velocity({
            left: posR
        }, {
            duration: 0,
            complete: function(elements) {
            	fly();
            }
        });   
    }
    
    function fly() {
        $("#plane").velocity({
            left: "-300px"
        }, {
            duration: speed,
            easing: "linear",
            complete: function(elements) {
            	go();
            }
        });
		}
    
    go();
}

$(document).ready(function() {

  $.getScript( "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js" )
  .done(function( script, textStatus ) {
		flyplanefly();
	});
  
});