带有文本的 jQuery 视差移动背景

Question

我正在尝试为一个小元素复制一些我非常喜欢的功能。

这是元素:https://en.playkot.com/

我已经使用以下代码使背景随鼠标移动而移动:

$(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

您指的是哪个文本..??我看不到任何文本....IMG 中嵌入了文本“PLAYKOT”.. 你可以试试这个恐龙移动代码....

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