Как спрятать декор, когда он начинает перекрывать контент
Картинка рядом с карточками меняет размер и положение вместе с контейнером. Фиксированный брейкпоинт не всегда попадёт в момент, когда между ними закончится место. Ахмад Шадид показал, как привязать скрытие к реальному расстоянию средствами CSS.
Через anchor positioning он растягивает вспомогательный элемент между краями декора и секции. Внутри лежит псевдоэлемент шириной 20 px: когда зазор становится меньше, появляется переполнение. Scroll timeline переключает CSS-переменную, а style container query убирает декор. Пользователю ничего прокручивать не нужно.
Приём требует поддержки anchor positioning, scroll-driven animations и запросов к стилям контейнера. Для проекта я бы оставил безопасную базовую вёрстку, а такое поведение добавил как улучшение.
Картинка рядом с карточками меняет размер и положение вместе с контейнером. Фиксированный брейкпоинт не всегда попадёт в момент, когда между ними закончится место. Ахмад Шадид показал, как привязать скрытие к реальному расстоянию средствами CSS.
Через anchor positioning он растягивает вспомогательный элемент между краями декора и секции. Внутри лежит псевдоэлемент шириной 20 px: когда зазор становится меньше, появляется переполнение. Scroll timeline переключает CSS-переменную, а style container query убирает декор. Пользователю ничего прокручивать не нужно.
Приём требует поддержки anchor positioning, scroll-driven animations и запросов к стилям контейнера. Для проекта я бы оставил безопасную базовую вёрстку, а такое поведение добавил как улучшение.
Просмотры: 87