基本上,我使用parallax.js库具有视差场景。

在场景内部,我有几个具有唯一视差设置数据标签的div。
在这些div之一中,我有一个元素想要对它施加倾斜效果(当鼠标悬停时)。但这是行不通的,如果元素在场景中,则会应用来自倾斜库的转换,但是如果我将其移出视差场景,则它会起作用。

我认为问题出在OnMouseMove事件的管理周围,或者可能无法以这种方式工作(当将转换应用于已经转换的元素的子对象时)。

Chrome EventListeners选项卡显示视差和倾斜mousemove移动侦听器都存在。

我将不胜感激任何帮助。如果您需要任何代码段,我可以提供,因为现在我实际上不知道要显示哪些特定部分,也不想复制粘贴整个库。

UPD。
这是我正在尝试做的一小段:



$(document).ready(function() {
  var scene = $('.prlx-scene').get(0);
  var parallaxInstance = new Parallax(scene, {
    relativeInput: true,
    invertX: false,
    invertY: false
  });
});

.fulld,
.prlx-scene {
  position: relative;
  height: 100%
}

.prlx-scene {
  width: 80%;
  margin-right: auto;
  margin-left: auto
}

.fulld {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  display: block;
  width: 100%;
  background-color: #000fff;
  background-position: 50% 50%;
  background-size: cover
}

.platonic-left-front-img {
  position: absolute;
  display: block;
}

.platonic-left-front {
  z-index: 40;
}

.platonic-left-front-img {
  left: 20%;
  max-width: 100%;
  max-height: 100%;
  width: 50%;
  top: 40%
}

.pc-text1 {
  top: 50%;
  left: 10%;
  display: block;
  position: fixed;
  width: 15%;
  height: 15%;
  background-color: #00ffff;
}

.pc-text {
  top: 50%;
  left: 30%;
  display: block;
  position: fixed;
  width: 15%;
  height: 15%;
  background-color: #00ffff;
}

img {
  max-width: 100%;
  vertical-align: middle
}

.scene-block {
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  bottom: 0;
  margin-top: 0
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

</head>

<body style="height:100%;position:absolute;width:100%;">
  <div class="pc-text1" data-tilt data-tilt-max="40" data-tilt-speed="200" data-tilt-perspective="500" data-tilt-reverse="true" style="z-index:9999;transform-style: preserve-3d;">
    <p style="transform: translateZ(50px);">TEXT</p>
  </div>
  <div class="fulld">
    <div class="prlx-scene">
      <div class="scene-block" data-depth="0.8"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="platonic-left-front-img"></div>
      <div class="scene-block" data-depth="0.85">
        <div class="pc-text" data-tilt data-tilt-max="90" data-tilt-speed="400" data-tilt-perspective="500" data-tilt-reverse="true" style="transform-style: preserve-3d;">
          <p style="transform: translateZ(50px);">TEXT</p>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.6.1/lib/vanilla-tilt.min.js"></script>
</body>

最佳答案

发现视差场景会禁用指针事件。

因此,为了使其正常工作,我需要在要倾斜的元素上添加style="pointer-events: all;"

07-24 17:10
查看更多