Stack Cards
→Прокрутите demo-область внутри рамки: каждая карточка прилипает к одной линии сверху, а следующая накрывает предыдущую. Снизу остаются видны цветные вкладки — так формируется стопка с глубиной.
★★★☆☆Medium
Scroll
7 / 7Эффекты, управляемые прокруткой: parallax, sticky-сцены, reveal.
Parallax
→Прокрутите demo-область: слои смещаются с разной скоростью, но остаются в кадре — эффект глубины без «улёта» сцены за край экрана.
★★★☆☆Medium
- scroll events
- transform
- CSS Variables
- requestAnimationFrame
- SVG
Scroll Reveal
→Прокрутите demo-область: блоки скрыты до входа в viewport. IntersectionObserver добавляет is-visible — opacity и transform анимируются один раз.
★★☆☆☆Easy
- IntersectionObserver
- transform
- opacity
- CSS Variables
Timeline
→Прокрутите demo-область: вертикальная лента заполняется по scroll progress, узлы активируются у линии активации.
★★★★☆Advanced
- scroll events
- CSS Variables
- requestAnimationFrame
Morph Sections
→Sticky-сцена: clip-path и оттенок фона меняются между секциями по scroll progress — плавный морф формы.
★★★★☆Advanced
- scroll events
- clip-path
- CSS Variables
- requestAnimationFrame
Horizontal Scroll
→Вертикальный scroll demo-области двигает горизонтальную галерею внутри sticky-viewport через translate3d.
★★★☆☆Medium
- scroll events
- transform
- position: sticky
- requestAnimationFrame
Pinned Elements
→Прокрутите demo-область: метки слева прилипают к линии pin, пока длинное тело каждой секции проходит мимо viewport.
★★★☆☆Medium
- position: sticky
- scroll events
- CSS Variables
- requestAnimationFrame
01 / 01