Прототип обычной страницы

Контент до каскада

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

01 / До эффекта

Обычный контент продолжает страницу

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

Никакой логики анимации здесь нет. Это обычная верстка страницы.

02 / Sticky cards

Как устроена работа

Заголовок уезжает обычным скроллом. При этом каждая следующая карточка доезжает до одной и той же точки и ложится поверх предыдущей. Для движения карточек JavaScript не используется.

01 Старт

Знакомимся с задачей

Разбираем продукт, аудиторию и главную бизнес-задачу. На этом этапе определяем, что именно должен сделать сайт для компании.

02 Структура

Собираем сценарий страницы

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

03 Дизайн

Создаём визуальную систему

Определяем типографику, сетку, характер интерфейса и детали, которые формируют ощущение бренда.

04 Сборка

Переносим дизайн в рабочий сайт

Собираем адаптивы, интерактивные состояния и проверяем поведение интерфейса на разных устройствах.

05 Запуск

Публикуем и проверяем результат

Финально проверяем страницы, формы, аналитику и готовим проект к реальным посетителям.

Карточки закончились
Кнопка находится после каскада и не участвует в sticky-анимации.

03 / После эффекта

Следующий раздел страницы

После окончания контейнера sticky-карточки естественно перестают прилипать и вся секция уезжает вверх. Дальше идёт обычный контент без специальной пустоты.

Отзывы Условная карточка следующего раздела.

Кейсы Обычный контент после sticky-блока.

Контакты Проверка естественного выхода из каскада.