jquery - 具有 100% 宽度和动画滚动直到图像完成的 CSS 背景图像

Question

所以我有这个以大图像为背景的网站。现在，我需要将图像缩放到视口(viewport)宽度的 100%，而不是将图像淡化为单一颜色或图案。

这并不能解决您只能看到图像的一部分(取决于浏览器大小)而我需要让整个图像可见的问题。仅向下滚动是不够的，因为那样图像就会结束，并且会出现我为背景选择的任何颜色(这很糟糕)。

所以我在想如果我可以拥有会怎样

• 背景图像缩放到视口(viewport)宽度的 100%，最小尺寸为图像宽度和
• 还在滚动时垂直向下设置动画 until
• 您到达图像高度的末端，然后它会停止，直到您向上滚动并恢复到图像的顶部，
• 具有视差效果。

将其中的每一个分开是 easy enough但我一直无法找到它们的组合以及修改以限制垂直滚动。如果有人能指出我正确的方向，我将非常感激。 :D

Answer 1

我已经为您在 jsFiddle 中描述的效果创建了一个工作演示:http://jsfiddle.net/qqW3G/(注意:我为图像指定了 200% 的高度，以确保它足以跨越窗口高度以用于演示目的。您需要删除它以避免图像倾斜。)

编辑:您可能会考虑的另一种选择是视差滚动效果，其中正文内容滚动速度比背景图像快，从而产生深度错觉。这是一个例子:http://jsfiddle.net/qPF2G/