如何实现旋转滑翔机双目标悬停效应

Question

我一直在网站上工作，并试图从革命滑块复制多通的悬停效果。- https://revolution.themepunch.com/wordpress-duotone-effect-add-on/

我似乎想不出如何将悬停效应应用到我的测试现场。我想要相同的悬停效果从多通主滑块到我的测试站点主旗帜。- http://ittiz2.qadracreatives.com/

如有任何建议或帮助，将不胜感激。更大的力量

注:我不会使用滑块革命插件，但我只是“复制”的效果水平视差滚动。

实际上，我已经找到了一段代码，但是效果被破坏了，下面是我复制的代码: pastebin.com/raw/Jc9Apavi

Answer 1

悬停效应可以通过以下步骤实现：

1. 将元素放在同一个滑块上，分成不同的组。在这种情况下，我会把前面的文字分成一组。把周围的元素(这些三角形)分成第二组。似乎非常遥远(模糊)的元素分成了第三组。要将它们分成不同的组，可以将它们的dom元素放入3个不同的数组中，或者简单地给每个组中的元素提供一个不同的css类，例如group-1、group-2和group-3。也可以将元素组织在同一个组中，并使用父div包装它们。以下步骤采用父div方法。
2. 加载页面后，计算幻灯片中心的位置。当检测到窗口调整大小的事件时，可能需要重新计算。计算本身很简单。我们使用滑块的左上角作为原点。实际上，我们使用幻灯片作为笛卡儿坐标系，原点是左上角。现在中心位置就是(slider_width / 2, slider_height / 2)。您可以缓存中心位置。
3. 完成此操作后，需要将mouse over event绑定到幻灯片。对于每个鼠标超过事件，得到鼠标的位置，并计算其相对位置与幻灯片的位置比较。现在你得到鼠标在我们坐标系中的位置。
4. 现在你既有鼠标的位置，也有幻灯片的中心，你可以很容易地找出鼠标是否在中间的上方，中间的左边，以及它离中心有多远。如果鼠标位于中心上方，则将所有三组移动到较低的位置(可以使用transform向下移动父div)。如果鼠标位于中心下方，则将所有三组移动到更高的位置。左边和右边一样。例如，让我们尝试计算水平移动(垂直方向相同)：

//negative number means mouse is on the left, positive means it is on the right.
let mouseHorizontalDistance; 
//you can adjust this to decide how far you wanna move the elements
let k = 1.3;

let baseMoveDistance = -(mouseHorizontalDistance) * k;
let horizontalTextGroupMoveDistance = baseMoveDistance + "px";
//in the demo, the near triangles move further than text
let horizontalNearTrianglesGroupMoveDistance = baseMoveDistance * 1.1  + "px";
//and the far triangles move even further.
let horizontalFarTriangleGroupMoveDistance = baseMoveDistance * 1.3  + "px";

document.querySelector('#textGroup').style.transform = translate(vertical, horizontalTextGroupMoveDistance);

//do the same for near and far triangles.