Question

我刚刚浏览了这个BBC旅游页面50 Reasons to #LoveTheWorld，并意识到在更大的图片上，页面重叠，当我们滚动时，有这种很酷的效果（我访问的其他网站没见过）。我想了解更多信息，但我甚至不知道要搜索什么。

当我们滚动时，在大图片上，页面仍然滚动并且图片被曝光，这很难解释。有人可以告诉我这些效果是什么，可能是一个教程，如果一个可用，或只是名称将足够有用。

Answer 1

您关联的网页仅使用background-attachment: fixed;。

它实际上使用绝对定位的img元素translated scrolling来保持固定＆＃39;但视觉效果几乎与当背景为fixed时（其大小设置为cover）。这种方法更容易检查这种技术的基础知识。

虽然非常简单，但它可以在大型（背景）图像或多个显示的图像行上使用时提供有趣的效果。

这是一个简单的fiddle。这是基本概念。

Refference

Answer 2

这称为Parallax

您可以在Keith Clark的Pure CSS视差文章中设置一个基本的视差标记。

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

然后像这样造型：

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px);
}

查看演示Here。

详细的完整文章是Here。

一些HTML / CSS效果，我想了解更多，但无法描述

2 个答案: