Going From Solid to Knockout Text on Scroll

This CSS trick creates a captivating title that transitions from solid color to knockout text as the background image scrolls. Achieved using only HTML and CSS, this effect involves two fixed-position containers. One displays white background with knockout text; the other, a background image with white text. Clever clipping techniques hide and reveal text based on scroll position, simulating a background change.

Important Note: This technique may not function correctly on older Internet Explorer versions or mobile WebKit browsers. Consider implementing fallback solutions for compatibility.

HTML Structure

The HTML consists of an outer wrapper containing two identical containers, each with an <h1></h1> element within a .title_wrapper div:

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

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

Each container uses a .container class and a unique identifier (.container_solid, .container_image). This allows for shared base styles and individual targeting.

Initial CSS Styles

The CSS sets both containers to full screen height (100vh). .container_solid receives a white background, while .container_image gets a fixed background image:

.wrapper {
  position: relative; /* Added for proper positioning */
  height: 100%;
  overflow: hidden; /* Added for better overflow control */
}

.container {
  height: 100vh;
  position: absolute;
  width: 100%;
  left: 0;
}

.container_solid {
  background: white;
  top: 0;
}

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

The <h1></h1> elements are styled. .container_image's text is white. .container_solid's <h1></h1> uses background-clip: text for the knockout effect, with a fallback black color:

.title_wrapper h1 {
  position: absolute; /* Added for precise positioning */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 4em; /* Example font size */
}

.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;
}

Clipping and Container Positioning

The crucial step involves clipping the containers to hide overflowing content. Absolute positioning is used, requiring manual positioning:

.container {
  clip: rect(0, auto, auto, 0);
  overflow: hidden;
  position: absolute;
  height: 100vh;
  left: 0;
  width: 100%;
  -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%); /* Safari fix */
}

.container_image is positioned below .container_solid using top: 100vh;.

Accessibility Improvement

The aria-hidden="true" attribute is added to the .container_image to inform screen readers that this container is purely decorative.

This refined approach ensures both visual appeal and accessibility. Further styling adjustments can be made to personalize the text and overall effect. Remember to always prioritize accessibility considerations when adding dynamic effects.

The above is the detailed content of Going From Solid to Knockout Text on Scroll. For more information, please follow other related articles on the PHP Chinese website!