向下滚动时，模糊部分

Question

我有一系列div与课程＆＃39; .section＆＃39;。

当我向下滚动时，我试图模糊每个div，当你向上滚动时，它看起来很正常。即使我知道怎么做淡化，然后我可以弄清楚模糊。

我的问题是在滚动时逐渐发生模糊。

Answer 1

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

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

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

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