В этом уроке мы создадим хамелеоновый заголовок, который меняет свой стиль при прокрутке, чтобы соответствовать цветовой теме нижнего раздела.
Этот эффект использует свойство CSS clip-path. Идея состоит в том, чтобы иметь клон основного заголовка внутри каждого <section> страницы. Каждый клон наследует стиль раздела, к которому он принадлежит.
Все клонированные заголовки размещаются вверху страницы (с фиксированной позицией). Затем свойство clip-path можно использовать для определения в качестве области отсечения для каждого заголовка элемента раздела, которому он принадлежит. Таким образом, каждый заголовок виден только тогда, когда находится над его родительским разделом.
Это создает эффект перехода между заголовками с разными цветовыми темами.
Превью эффекта хамелеона
Начнем клонировать заголовок внутри разных разделов страницы.
<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 -->
Обратите внимание, что каждый клонированный заголовок имеет атрибут aria-hidden, равный true; таким образом, программа чтения с экрана не передается.
Кроме того, к каждому дочернему элементу с вкладками следует добавить индекс табуляции, равный -1, чтобы пользователи с клавиатурой не могли перемещаться по элементам заголовка несколько раз.
Чтобы изменить стиль каждого раздела и элемента заголовка, мы используем разные значения темы данных для разделов. Тема данных затем наследуется заголовком.
Каждая тема данных используется для переопределения цветовых переменных CSS, используемых в компонентах.
Теперь мы можем разместить все клонированные заголовки вверху страницы:
.cha-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
На последнем этапе нам нужно, чтобы каждый заголовок был виден только тогда, когда он находится внутри родительского элемента раздела.
К сожалению, свойство переполнения не работает с фиксированными дочерними элементами. Но мы можем добиться того же эффекта, используя свойство clip-path.
Во-первых, давайте добавим абсолютную позицию к элементу .cha-header-clip и изменим его размеры, чтобы убедиться, что он покрывает всю область элемента раздела:
.cha-header-clip {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
Теперь мы можем использовать свойство clip-path, чтобы установить в качестве области отсечения всю область .cha-header-clip:
.cha-header-clip {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
Вот и все! 🎬
Каждый клонированный заголовок теперь будет виден только внутри своего родительского раздела, и это создает эффект отсечения при прокрутке.
Ссылка на твиттер автора - twitter.com/guerriero_se
