仅使用CSS进行视差滚动？

小编典典

仅使用CSS进行视差滚动？

css

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

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

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

注意：这接近于我想要产生的效果

阅读 333

2020-05-16

共1个答案

小编典典

要产生非常基本的视差滚动效果，下面的示例就足够了。 请注意，浏览器前缀，后备等未得到解决。标/* 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。删除它，视差就会失败。

2020-05-16