jQuery視差移動背景與文字

Question

我想複製一些功能，我很喜歡一個小項目。

下面是該項目：https://en.playkot.com/

我已經manged使鼠標移動的後臺移動用下面的代碼：

$(document).ready(function() { 
    var movementStrength = 25; 
    var height = movementStrength/$(window).height(); 
    var width = movementStrength/$(window).width(); 
    $("#top-image").mousemove(function(e){ 
     var pageX = e.pageX - ($(window).width()/2); 
     var pageY = e.pageY - ($(window).height()/2); 
     var newvalueX = width * pageX * -1 - 25; 
     var newvalueY = height * pageY * -1 - 50; 
     $('#top-image').css("background-position", newvalueX+"px  "+newvalueY+"px"); 

    }); 
}); 

我也想在文本上的鼠標移動而移動。

我只是徘徊，如果有任何庫我可以使用，以獲得與上面的例子相同的效果？

我的項目在這裏可以查看：http://super-code.co.uk/test.php

Answer 1

你闖民宅其文字??我不能看到任何文字....文本「PLAYKOT」嵌入在IMG .. 你可以用這個恐龍移動代碼嘗試....

$('#dinosaur').on('mouseenter', function() { 
    $(this).find('img').css('left', '50px'); 
}).on('mouseleave', function() { 
    $(this).find('img').css('left', '0px'); 
}); 

Answer 2

$("#top-image").mousemove(function(e){ 
     var pageX = e.pageX - ($(window).width()/2); 
     var pageY = e.pageY - ($(window).height()/2); 
     var newvalueX = width * pageX * -1 - 25; 
     var newvalueY = height * pageY * -1 - 50; 
     $('#top-image').css("background-position", newvalueX+"px  "+newvalueY+"px"); 

     $(".pa").css("transform","translate("+ newvalueX+"px ," +newvalueY+"px)"); 

    }); 

添加最後一行將工作...