jQueryで画像を前後に移動

Question

マウスを動かすと、宇宙船の動きの効果が本当に好きです。誰でもこの効果をjQueryでどのように達成できるのか知っていますか？

ここでは、リンクの： http://spaceexpeditions.xcor.com/

Answer 1

あなたはこの単純なコード

$(window).mousemove(function(e){ 
 
    var clientX = e.clientX; 
 
    var clientY = e.clientY; 
 
    
 
    var width = $(window).width(); 
 
    var height = $(window).height(); 
 
    
 
    var constWidth = (width/2) - $("div").width(); 
 
    var constHeight = (height/2) - $("div").height(); 
 
    
 
    $("div").css({ 
 
     left: constWidth + ((constWidth - clientX)/10), 
 
     top: constHeight + ((constHeight - clientY)/10)   
 
    }); 
 
});

body { 
 
    position: relative; 
 
} 
 

 
div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: blue; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 300px; 
 
    -webkit-transition: all 0.15s; 
 
    transition: all 0.15s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

を使用することができますがjsfiddle