Всем привет! Буквально за 5 минут расскажу, как сделать parallax-эффект, который помог нам наглядно показать стилистические различия между светлой и темной темами на сайте «Дизайн-система НЛМК». Parallax-эффект позволяет пользователю увидеть изменения темы у компонентов при скролле страницы, причем сами компоненты зафиксированы, а линия смены темы двигается синхронно со скроллом. Но для начала мне следует представиться. Я - frontend-разработчик “НЛМК - Информационные технологии”, занимаюсь созданием различных решений для упрощения работы промышленных цехов. Один из моих проектов - «Дизайн-система НЛМК», которая является основой для других, более сложных решений в других проектах.  Разработка структуры сайта, который является своеобразной "визитной карточкой" «Дизайн-системы», дала простор для интересных фич по его стилизации. Какой смысл parallax-эффекта в данном проекте? В “Дизайн-системе” присутствуют различные компоненты с вариациями для темной и светлой тем: от простых всплывающих подсказок до сложных элементов навигации. Как всё это изящно показать пользователям и, возможно, помочь выбрать тему интерфейса? Как раз с помощью parallax-эффекта. Сделать его быстро и просто.  Приступим к реализации. Для этого нам потребуются старые-добрые HTML и CSS, а также препроцессор SCSS. Ну и базовое знание БЭМ также не повредит :) Создадим блок экрана, содержащий в себе два дочерних элемента, которые будут содержать две картинки с компонентами светлой и темной тем: Класс .screen__part объединяет в себе общие стили дочерних элементов, а модификаторы --light и --dark его расширяют. Начнем написание стилей блоков. Создадим общий класс блока .screen, который содержит в себе элемент .screen__part: Предполагается, что высота каждого элемента с картинками будет равна высоте экрана (оно же 100vh), чтобы пользователь мог рассмотреть все компоненты. Далее добавим свойства модификаторов .screen__part--light и .screen__part--dark: Здесь используются более комплексные стили, поэтому давайте разберемся подробнее. Свойство .background у обоих элементов может заменить десяток аналогичных свойств для стилизации фоновых картинок. Но для наглядности разобьем его на части (возьмем значения из “светлого” блока): Первое и второе свойства вполне понятны - они содержат фоновый цвет и путь к фоновой картинке. Третьим свойством мы размещаем изображение один раз и больше его не повторяем. Свойство background-position указывает начальное положение фона, в нашем случае мы располагаем его по центру как по горизонтали, так и по вертикали. Свойством background-size мы указываем размер фонового изображения, причем значением cover мы сохраняем пропорции изображения так, чтобы его высота равнялась высоте элемента. Свойством background-attachment и значением fixed мы фиксируем фоновое изображение и предотвращаем его перемещение (или фиксируем его “на заднем плане”, кому как удобнее) Теперь рассмотрим свойство clip-path. С его помощью можно создавать блоки в форме разных геометрических фигур. Если в качестве значения использовать функцию polygon, то можно получить блок в форме четырехугольника. В нашем примере мы передаем в функцию четыре пары значений, четыре пары координат углов четырехугольника (левый верхний, правый верхний, правый нижний, левый нижний): Но если оставить все как есть, то окажется, что то, что было обрезано при помощи clip-path, оставит под собой пустое пространство или “зазор”. Поэтому при помощи свойств position и top мы поднимаем “темный” блок ровно на столько, сколько по высоте было обрезано, а именно на 12vh (главное помнить, что система координат начинается в левом верхнем углу, и поэтому в свойстве надо поставить знак “минус”, иначе “темный” блок окажется еще ниже). Ниже представлен демо-результат проделанной работы: На этом, в принципе, все! Используя несколько несложных свойств css, мы реализовали интересный parallax-эффект, который смог в полной мере раскрыть темизацию используемых компонентов.