Dependencies

• CodyFrame (CodyHouse front-end framework)

Tutorial

This effect uses the clip-path CSS property. The idea is to have a clone of the main header inside each <section> of the page. Each clone will inherit the style of the section it belongs to.

All cloned headers are placed at the top of the page (with a fixed position). The clip-path property can then be used to define, as clipping region for each header, the section element it belongs to. This way, each header is visible only when on top of its parent section.

This creates the clipping transition effect between headers with different color themes.

Let's start cloning the header inside the different sections of the page.

<section class="position-relative">
  <div class="cha-header-clip">
    <header class="cha-header">
      <!-- header content -->
    </header>
  </div>

  <!-- section content here -->
</section>

<section class="position-relative" data-theme="dark">
  <div class="cha-header-clip" aria-hidden="true">
    <header class="cha-header">
      <!-- header content -->
    </header>
  </div>

  <!-- section content here -->
</section>

<!-- other sections here -->

Note that each cloned header has an aria-hidden attribute of true; this way, it is not announced to screen readers.

Additionally, a tab index of -1 should be added to each tabbable child to prevent keyboard users from navigating multiple times through the header items.

To change the style of each section and header element, we are using different data-theme values to the sections. The data-theme is then inherited by the header.

Each data-theme is used to override the CSS color variables used within the components. If you want to read more about using color themes in CodyFrame, head over to the colors page of our documentation. We've also published a blog article where we explain why we prefer CSS custom properties to SASS variables.

We can now place all cloned headers at the top of the page:

.cha-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

As the last step, we need each header to be visible only when it is inside its section parent element.

Unfortunately, the overflow property does not work on fixed positioned children. But we can achieve the same effect using the clip-path property.

First, let's add a position absolute to the .cha-header-clip element and change its dimensions to make sure it covers the entire section element area:

.cha-header-clip { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

We can now use the clip-path property to set, as clipping area, the entire .cha-header-clip region:

.cha-header-clip { 
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

That's it! Each cloned header will now be visible only when inside its section parent, and this creates the clipping effect on scroll.