jQuery 多个视差按钮

Question

我在单个页面上有一堆 div，它们的类型都相同，可以用作按钮。它们目前都具有相同的 class box，每个都有自己独特的内容。

我试图让它们稍微远离鼠标以产生轻微的视差效果。但我无法让它们彼此独立移动。

目前，这是我尝试过的：

$(function() {
    $('.box').each(function() {
        var location = $(this).offset();
        var locationX = location.left;
        var locationY = location.top;

        $('html').on("mousemove", function(event) {
            var offsetX = (locationX - event.pageX) / 100;
            var offsetY = (locationY - event.pageY) / 100;

            $('.box').css('transform', 'translate3d(' + offsetX + 'px, ' + offsetY + 'px, 0)');
        });
    });
});

所以基本上，我抓住了每个盒子元素的位置，我得到了它的 X 和 Y 位置。然后该事件应该获得光标的位置然后做一些数学运算以根据框的初始位置生成视差效果。

现在我知道为什么这行不通了，因为在 css 的那一行，我使用的是 .box，它适用于页面上的每个框元素到最后一个位置声明框。我的初衷是在它的地方使用 this ，但它指的是 html 启动 mousemove 功能时使用的，但我真的想访问 [=12 的实例=] 就在它上面。

我需要做什么才能让盒子彼此独立移动？

(Here's a jfiddle of what I've got so far)

Answer 1

此脚本独立移动盒子，但独立移动量较小（见下文）。

jQuery

  $('html').on("mousemove", function(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    $('.box').each(function( i ) {
      var location = $(this).offset();
      var locationX = location.left;
      var locationY = location.top;
      var offsetY = ( locationY - mouseY ) / 40;
      var offsetX = ( locationX - mouseX ) / 30;
      //console.log( i + ' locationX: ' + locationX );
      $( this ).css('transform', 'translate3d(' + offsetX + 'px, ' + offsetY + 'px, 0)');

  });
});

从 devtools 渲染 html：

<body translate="no">

    <div class="box" style="top: 50px; left: 50px; transform: translate3d(-27.3027px, -0.854667px, 0px);">
      Box 1
    </div>

    <div class="box" style="top: 50px; left: 250px; transform: translate3d(-23.2213px, -0.854667px, 0px);">
  Box 2
</div>

<div class="box" style="top: 50px; left: 450px; transform: translate3d(-19.1397px, -0.854667px, 0px);">
  Box 3
</div>
</body>

所以也许重新计算视差数学？也就是说，由于盒子是垂直对齐的，它们将始终具有相同的 offsetY，因此永远不会在该维度上相对于彼此移动。它们的 locationX 相差 200px，如果将其除以 50，它们只能相对移动 4px。我认为您的偏移量计算需要更复杂。

代码笔：http://codepen.io/SteveClason/pen/JKjWVB?editors=1111

jQuery 多个视差按钮

jQuery multiple parallax buttons

javascript

jquery

parallax