Chameleonic Header
In this tutorial, we will create a chameleonic header that changes its style on scroll to match the color theme of the underneath section.
:package: Browse our library of 217 accessible web components
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> <div> <header> <!-- header content --> </header> </div> <!-- section content here --> </section> <section data-theme="dark"> <div aria-hidden="true"> <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.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Probabilistic Method
Noga Alon、Joel H. Spencer / Wiley-Interscience / 2008-8-11 / USD 137.00
Praise for the Second Edition : "Serious researchers in combinatorics or algorithm design will wish to read the book in its entirety...the book may also be enjoyed on a lighter level since the diffe......一起来看看 《The Probabilistic Method》 这本书的介绍吧!