Tutorial - Chameleonic Header

栏目: IT技术 · 发布时间: 5年前

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.

View Demo

Download

: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.

Tutorial - Chameleonic Header
Preview of the chameleonic effect

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.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创业之初你不可不知的融资知识

创业之初你不可不知的融资知识

桂曙光 / 机械工业出版社 / 2010-6-1 / 48.00元

从零到精通 成功融资必读书 像小说一样好看的趣味融资书 手把手教你找到VC拿到钱 本书以创业者寻找风险投资的逻辑顺序为主线,运用理论分析和实例剖析相结合的手法,将简洁、通俗的语言与丰富的图表工具相结合,辅以中肯的建议,同时运用大量鲜活的、有代表性的成败案例,为读者解读创业之初企业有效成功融资的途径和方法,帮助你的企业开创新的辉煌。一起来看看 《创业之初你不可不知的融资知识》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具