Удачные сайты со скроллителлингом объединяет одна идея: прокрутка задаёт ход истории. Читатель движется по странице, а изображение меняется вместе с текстом. Так он сам управляет темпом рассказа. Приём работает, когда каждый шаг открывает что-то новое, и перестаёт работать, когда прокрутка превращается в утомительную обязанность.
Как появился скроллителлинг
Формат появился в журналистике данных. За отправную точку обычно принимают «Snow Fall», материал New York Times о сходе лавины, опубликованный в интернете в декабре 2012 года. За этот материал John Branch получил Пулитцеровскую премию 2013 года в категории Feature Writing. Жюри отдельно отметило «умелое включение мультимедийных элементов».
Редакции превратили этот подход в набор инструментов. Библиотеки с открытым кодом, например Scrollama, упростили основной приём: запускать изменение, когда текстовый блок входит в видимую область. Затем формат переняли бренды. Страницы Apple сделали популярной последовательность кадров, которой управляет прокрутка. CSS-Tricks воспроизвёл этот эффект: 148 кадров поочерёдно выводятся в canvas по мере прокрутки.
Четыре основных приёма скроллителлинга
Почти любой сайт с историей, управляемой прокруткой, сочетает эти четыре приёма.
| Приём | Что происходит | Для каких задач | На что обратить внимание |
|---|---|---|---|
| Закреплённая сцена | Изображение остаётся на месте, а проходящие рядом текстовые блоки меняют его состояние | Объяснение устройства товара, процесса или графика | Если сцена закреплена дольше чем примерно на 3 экрана, возникает ощущение, что страница застряла |
| Постепенное раскрытие | Каждый раздел добавляет один элемент: слой, подпись или число | Характеристики, состав, объяснение принципа работы | Если шагов слишком много, рассказ превращается в слайд-шоу |
| Покадровое управление видео или последовательностью изображений | Положение прокрутки определяет, какой кадр показывать | Вращение товара, показ изделия в разборе, трансформации | Размер файлов: каждый кадр должен занимать минимум места |
| Движение камеры | При прокрутке камера движется по 3D-сцене | Пространства, здания, объёмные сцены с товаром | Нагрузка на графический процессор старых телефонов |
Движение камеры соединяет скроллителлинг с 3D в реальном времени. Более ресурсоёмкие решения разбираем в примерах сайтов на WebGL.
Как спланировать страницу со скроллителлингом
Начните с раскадровки в обычной таблице. К инструментам дизайна переходите позже. Каждая строка таблицы отвечает за один смысловой шаг.
- Разбейте историю на пять-девять смысловых шагов. По одному предложению на каждый. Если пока не получается, история ещё не сформулирована.
- Определите изображение для каждого шага. Что видит читатель, когда это предложение появляется на экране? Например: «товар закрыт», затем «крышка открывается», затем «внутренний слой подсвечивается».
- Отведите каждому шагу определённую длину прокрутки. Считайте её в высотах видимой области. Обычно на один шаг нужно от 0,5 до 1,5 экрана. Сложите значения: если рассказ занимает 15 экранов, а на статичной странице уместился бы в 3, сокращайте.
- Выделите один главный момент. В большинстве удачных примеров основное внимание уделяется одной выразительной трансформации. Остальные сцены сдержаннее.
- Добавьте столбец для мобильной версии. Для каждого шага решите, что увидит пользователь телефона: ту же анимацию, упрощённый вариант или статичное изображение с текстом.
- Добавьте столбец для режима уменьшенного движения. Посетителям с настройкой prefers-reduced-motion нужно показывать конечное состояние сцены без анимации.
Пример заполненной строки:
| Шаг | Текст | Что на экране | Длина прокрутки | Мобильная версия | Режим уменьшенного движения |
|---|---|---|---|---|---|
| 3 | «Три слоя в одном корпусе». | Корпус разделяется на три слоя | 1,5 экрана | То же действие, 60 кадров | Статичное 3D-изображение изделия в разборе |
Эта таблица станет заданием для дизайна, анимации и разработки. Для страниц запуска продукта смысловые шаги можно встроить в структуру из статьи о сайте к запуску продукта.
Ошибки, которые мешают истории
Перехват прокрутки. Когда сайт сам задаёт скорость прокрутки или принудительно останавливает страницу в заданных точках, он нарушает привычный принцип: вы прокручиваете, страница движется. Webdesigner Depot перечисляет, где возникают проблемы: сенсорные устройства, управление с клавиатуры, режим уменьшенного движения и ускорение прокрутки трекпадом. Оставьте прокрутку браузеру, а анимацию привяжите к её положению. Сглаживание допустимо, пока оно смягчает движение, но не блокирует его.
Скачки видимой области на телефоне. Адресная строка появляется и скрывается, меняя высоту видимой области прямо во время прокрутки. Поэтому закреплённые сцены с обычной высотой 100vh скачут. Для таких разделов используйте единицы малой видимой области (svh) или фиксированную высоту в пикселях. Проверяйте на реальном устройстве.
Тяжёлые последовательности кадров. 150 полноразмерных кадров могут занимать больше места, чем весь остальной сайт. Уменьшайте размер кадров и загружайте основную их часть после того, как на экране появится первое содержимое.
Невидимый для поиска текст. Если история существует только внутри canvas или появляется через JavaScript, поисковик может увидеть пустую страницу. В руководстве Utsubo по SEO для WebGL правило сформулировано прямо: каждое содержательно значимое состояние страницы должно существовать в доступном для обхода HTML ещё до запуска рендеринга. Держите текст в DOM, а анимацию стройте вокруг него. Остальные вопросы разобраны в статье о SEO сайтов с анимацией.
Медленная загрузка первого экрана. Для показателя Largest Contentful Paint Google считает хорошим результатом 2,5 секунды или меньше. Первый экран страницы со скроллителлингом должен состоять из обычного HTML и изображения. Анимацию можно подключить после.
