仅使用CSS进行视差滚动？

pawan 发表于 Dev

帕万

我一直在从事一个项目，并且内容已经完成。但是对于设计，我正在考虑使用视差滚动技术。

但是，我所能找到的全部还是JavaScript或Jquery，而我只精通CSS3。

可以仅使用CSS3（如果需要使用HTML5）而不是使用jquery插件来实现视差滚动吗？如果我能指出一些相同的教程，那就太好了。

注意：这接近于我想要产生的效果（http://jessandruss.us/）

查尔维

我真的很喜欢KitKat的回答，但是正如Roy Prins所建议的那样，将其简化为基本要素将非常有帮助，以准确了解产生这种效果的足够方法。我在这里做了。

要产生非常基本的视差滚动效果，下面的示例就足够了。请注意，浏览器的前缀，后备等未得到解决。标/* e.g. */有的CSS值可能会由设计人员决定是否更改。

在这里看到我的叉子。

<html><head><style>
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  body {
    perspective: 1px; /* e.g. */
  }
  .background {
    transform:
      translateZ(-.4px)
      scale(.6)
      translateX(-104%)
      translateY(-40%)
      rotate(-5deg); /* e.g. */
  }
  .foreground {
    transform:
      translateZ(.25px)
      translateX(50%)
      scale(.75)
      rotate(2deg); /* e.g. */
  }
</style></head><body>
  <img class="background"/>
  <img class="foreground"/>
</body></html>

对KitKat的答案进行了较小的修正：似乎不需要transform-style:preserve-3d（至少在Chrome中是这样），并且效果取决于身体的overflow:auto。删除它，视差就会失败。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。