如何根据光标的坐标进行平滑透明？

Question

如何制作这样的动画https://meetwalter.com？ 要根据光标的位置更改透明度？ 我用css做了类似的实现，但正如我在网站上所理解的那样，它是通过JS clientX / clientY完成的。

https://jsfiddle.net/Doroshenkomagic/z7mjag2t/

Answer 1

在这里，我找到了一些可能对您有用的内容：https://jsfiddle.net/Doroshenkomagic/z7mjag2t/，您可以在此处查看其背后的想法：https://moul.us/changing-an-elements-opacity-based-on-the-mouses-distance-from-its-center/

基本上：

var mouse_x = event.pageX - $(this).offset().left;
var mouse_y = event.pageY - $(this).offset().top;

这是关键要素之一：这会不断跟踪您的鼠标位置。目前，它会相对于左上角跟踪鼠标。

var center_x = Math.round(parseInt(element_w) / 2);
var center_y = Math.round(parseInt(element_h) / 2);

这是另一个关键因素：这将使用以前的代码跟踪图像的中心：

var element_w = $(this).width();
var element_h = $(this).height();

检测到元素的高度和宽度。之后只是一堆计算，以发现鼠标在与图像中心进行比较并应用淡入淡出时的距离。在您的情况下，您应该修改元素的不透明度。

您还可以在此处找到完整的代码：https://github.com/rmmoul/jquery-opacity-by-mouse-location