一个好看实用的【图片-文本】滚动交互

这里有一个有趣的 CSS 技巧：一个大标题，随着其后面的背景图像滚动到位，从纯色切换到挖空文本。等不及的可以直接看最后一个。

如何实现呢？

设置 HTML

<header>

  <div class="container container_solid">
    <div class="title_wrapper">
      <h1>The Great Outdoors</h1>
    </div>
  </div>

  <div class="container container_image">
    <div class="title_wrapper">
      <h1>The Great Outdoors</h1>
    </div>
  </div>

</header>

初始样式

.container {
  height: 100vh;
}

.container_solid {
  background: white;
}

.container_image {
  background-image: url(/path/to/img.jpg);
  background-size: 100vw auto;
  background-position: center;
  background-attachment: fixed;
}

接下来，我们可以对<h1>元素进行一些样式设置。里面的文字.container_image可以简单地是白色的。但是，要获取内部元素的挖空文本，我们需要应用背景图像，然后使用和CSS 属性将背景应用到文本本身而不是元​​素的边界。请注意，背景的大小与我们元素的大小相同。确保事情顺利进行很重要。<h1>container_imagetext-fill-colorbackground-clip<h1><h1>.container_image

.container_solid .title_wrapper h1 {
  background: url(https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-size: 100vw auto;
  background-position: center;
  
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  
  color: black;
}

.container_image .title_wrapper h1 {
  color: white;
}

剪切文本和容器

这就是事情开始变得非常有趣的地方。我们只希望当容器的<h1>当前滚动位置位于其父容器的边界内时容器可见。通常这可以通过overflow: hidden;在父容器上使用来解决。但是，由于我们的两个<h1>元素都使用固定定位，因此它们现在是相对于浏览器窗口而不是父元素定位的。在这种情况下使用overflow: hidden;不会有任何效果。

为了让父容器隐藏固定的溢出内容，我们可以使用clip带有绝对定位的CSS属性。这告诉我们的浏览器隐藏元素边界之外的任何内容。让我们替换类的样式，.container以确保它们不会显示任何溢出元素，即使这些元素使用固定定位。

.container {
  clip: rect(0, auto, auto, 0);

  overflow: hidden;

  position: absolute;

  height: 100vh;
  left: 0;
  width: 100%;
}

最后代码

html

<header>

  <!-- First container -->
  <div class="container container_solid">
    <div class="title_wrapper">
      <h1>The Great Outdoors</h1>
    </div>
  </div>

  <!-- Second container -->
  <div class="container container_image" aria-hidden="true">
    <div class="title_wrapper">
      <h1>The Great Outdoors</h1>
    </div>
  </div>

</header>

<section>
  <h2>Lorem ipsum dolor sit amet.</h2>
  <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  </p>
</section>

scss

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@900&display=swap');

header {
  height: 200vh;
}

.container {
  /* hide fixed overflow contents */
  clip: rect(0, auto, auto, 0);

  /* does not work if overflow = visible */
  overflow: hidden;

  /* only works with absolute positioning */
  position: absolute;

  /* Make sure containers are full-width and height */
  height: 100vh;
  left: 0;
  width: 100%;
  
  
  /* safari hack */
  -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
}

.container_solid {
  background: white;
  
  /* position this container at the top of its parent element */
  top: 0;
}

.title_wrapper {
  position: fixed;
  display: block;  
  margin: auto;
  width: 100%;
  /* center the text wrapper vertically */
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.title_wrapper h1 {
  text-align: center;
  font-size: 64px;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-weight: 900;
}

.container_solid .title_wrapper h1 {
  /* the text background */
  background: url(https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?&q=85);
  background-size: 100vw auto;
  background-position: center;
  
  /* clip the text is possible */
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  
  /* fallback text color */
  color: black;
}

.container_image {
  /* Grab a free image from unsplash */
  background-image: url(https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-size:100vw auto;
  background-position: center;
  background-attachment: fixed;
  
  /* position the second container below the first container */
  top: 100vh;
}

.container_image .title_wrapper h1 {
  color: white;
}

section {
  min-height: 100vh;
  padding: 2em;
  margin: auto;
  max-width: 800px;
}

section h2 {
  font-family: 'Fraunces', serif;
}

section p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}