滚动时逐渐饱和/去饱和背景图像?

时间:2015-07-08 18:17:22

标签: javascript jquery css

我有一个项目,我正在研究全尺寸的固定背景图像。我想弄清楚的是让图像以灰度开始的最佳方式,然后当用户向下滚动时,颜色变得更加饱和,直到页面的末尾它是全彩色。我正在寻找一种平滑的逐渐淡出/淡出颜色。

我在考虑将2个图像,一个颜色和一个灰度相互叠加,并改变不透明度以获得效果,但这意味着要加载2个大图像。仅使用一个图像有更好的方法吗?

1 个答案:

答案 0 :(得分:1)

您的一些选择

  1. 按照你的说法加载2张图片
  2. 只加载一个并使用canvas元素进行去饱和
  3. 使用新的过滤器css属性
  4. 最好组合选项1和3,使用modernizr确定支持