【发布时间】：2018-01-11 14:11:25
【问题描述】：
如何制作https://meetwalter.com这样的动画？
要根据光标的位置更改透明度？
我用 css 做了一个类似的实现，但据我了解，它是通过 JS clientX / clientY 完成的。
https://jsfiddle.net/Doroshenkomagic/z7mjag2t/
【问题讨论】：
标签： javascript css animation frontend
【发布时间】：2018-01-11 14:11:25
【问题描述】：
在这里，我找到了一些可能对你有帮助的东西：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
【讨论】：