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.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
打造有吸引力的学习型社群
苏平、田士杰、吕守玉 / 机械工业出版社 / 45.00元
本书首先对社群的定位、准备和吸引粉丝方面等做了饶有趣味的介绍,从社群黏度的提升、社群知识的迭代与转化和社群的持续发展等多个角度入手,对学习型社群的运营手段、运营模式、运营规律和运营经验等进行了全方位剖析。从中国培训师沙龙这个公益社群近十年成功运营的经验中,为如何经营好学习型社群总结出了一套系统性的、具有实操价值的方法。并以此为基础,扩展到知识管理、团队管理、内容IP等领域,为有致于社团建设以及优质......一起来看看 《打造有吸引力的学习型社群》 这本书的介绍吧!