Меняющееся меню на CSS и JavaScript Заголовок-хамелеон в CSS и JavaScript

В этом уроке мы создадим хамелеоновый заголовок, который меняет свой стиль при прокрутке, чтобы соответствовать цветовой теме нижнего раздела.



ДЕМО
ИСХОДНИКИ


Этот эффект использует свойство CSS clip-path. Идея состоит в том, чтобы иметь клон основного заголовка внутри каждого <section> страницы. Каждый клон наследует стиль раздела, к которому он принадлежит.

Все клонированные заголовки размещаются вверху страницы (с фиксированной позицией). Затем свойство clip-path можно использовать для определения в качестве области отсечения для каждого заголовка элемента раздела, которому он принадлежит. Таким образом, каждый заголовок виден только тогда, когда находится над его родительским разделом.

Это создает эффект перехода между заголовками с разными цветовыми темами.

Меняющееся меню на CSS и JavaScript

Превью эффекта хамелеона

Начнем клонировать заголовок внутри разных разделов страницы.


<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%);
}

Вот и все! 🎬

Каждый клонированный заголовок теперь будет виден только внутри своего родительского раздела, и это создает эффект отсечения при прокрутке.


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!