Question

我一直在一个网站上工作，尝试从旋转滑块复制Duotone的悬停效果。 -https://revolution.themepunch.com/wordpress-duotone-effect-add-on/

我似乎无法弄清楚如何将悬停效果应用于我的测试站点。我想要从Duotone主滑块到测试站点主横幅相同的悬停效果。 -http://ittiz2.qadracreatives.com/

任何建议或帮助将不胜感激。更多力量

注意：我不会使用滑块旋转插件，而只是“复制”水平视差滚动上的效果。

实际上，我已经找到了一个代码，但是效果坏了，这是我复制的代码：pastebin.com/raw/Jc9Apavi

Answer 1

悬停效果可以通过以下步骤完成：

将同一滑块上的元素分成不同的组。在这种情况下，我会将前面的文章归为一组。将周围的元素（那些三角形）分成第二组。似乎很遥远（模糊）的元素进入了第三组。要将它们分为不同的组，可以将其dom元素放入3个不同的数组中，也可以简单地为每个组中的元素提供不同的CSS类，例如group-1，group-2和group-3 。或者，您可以将元素组织在同一组中，并使用父级div包装它们。以下步骤假定使用父div方法。
在页面加载后，计算幻灯片中心的位置。检测到窗口调整大小事件时，可能需要重新计算。计算本身很简单。我们使用滑块的左上角作为原点。实际上，我们将幻灯片用作笛卡尔坐标系，并且原点位于左上角。现在，中心位置仅为(slider_width / 2, slider_height / 2)。您可以缓存中心位置。
完成此操作后，您需要将mouse over event绑定到幻灯片。对于每个鼠标悬停事件，获取鼠标位置，然后将其相对位置与幻灯片的位置进行比较。现在您可以获得鼠标在我们坐标系中的位置。
现在您同时拥有鼠标的位置和幻灯片的中心，您可以轻松地找到鼠标是否在中心上方，中心左侧以及距中心的距离。如果鼠标位于中心上方，则将所有三个组向下移动（可以使用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.

如何实现Revolution Slider Duotone悬停效果

1 个答案: