向下滚动时模糊部分

Question

我有一系列带有“.section”类的 div。

当您向下滚动时，我试图模糊每个 div，当您向上滚动时，它看起来很正常。即使我知道如何进行淡入淡出，我也可以弄清楚模糊。

我的问题是随着您滚动而逐渐模糊。

Answer 1

我会使用offset.top method 计算元素到中心点的绝对距离，然后将该距离标准化为 0-1 百分比范围，然后将模糊值应用为 max_blur * normalized_distance。

假设您的中心点位于 100 像素，列表顶部的元素位于 0 像素，而底部的元素位于 200 像素。所以顶部和底部的绝对距离都是100px，中心1的绝对距离是0px。所以现在计算模糊值：

var max_blur = 10; // (px)
var blur =  max_blur * (Math.abs(distance_of_scroll_from_center) / 100)

如您所见，顶部和底部的元素将具有 100% 的模糊度，而居中的元素将具有 0% 的模糊度。如果我们将另一个元素放在 50px 处，那么它将具有最大模糊值的 50%，依此类推。