简单的视差滚动

我在谷歌上搜索了“简单的视差滚动”，然后参考了w3上的一个教程。w3视差滚动演示。

我喜欢背景图片在用户滚动时保持静止的滚动效果。我正在创建一个视差滚动效果（可能并不正式称为视差滚动，但我使用这个名称是因为 W3C 教程中是这样称呼的）。

然而，

它在手机上已经不能用了。>:(

问题在于，

background-attachment: fixed由于重绘成本过高，该 CSS 属性在移动设备上无法正常工作。

保罗·艾瑞什

@paul_irish

@ppk @beverloo固定背景会带来巨大的重绘成本，并严重影响滚动性能，我认为这就是它被禁用的原因。

2013年2月27日 下午17:30

10月 17日

但没关系，

我们仍然可以使用它position: fixed来获得同样想要的炫酷效果。我从这个实验中发现，position: fixed尽管图像的参数不同，但所有使用该参数的图像都会被一起渲染并相互堆叠z-index。

简单的微笑效果，

我有两个透明的GIF动画，表情各不相同。当用户滚动页面时，GIF动画会从微笑变成无所谓表情。

其思路是在两个 GIF 图片之间添加一个白色图层，以隐藏底层。

在浏览器中体验演示版

源代码

等等，

最初我使用了两个不同的 GIF 图片，但由于下载时间不同，它们可能无法同步。一个简单的解决方法是将两个 GIF 图片合并成一个！我们可以为object-position每个 div 元素裁剪图片，类似于 CSS 的 Sprites 效果。这样既节省了一次图片调用，又能确保图片始终同步。

好的，

再见。