Визуальный сторителлинг и прокрутка

Визуальный сторителлинг — рассказ картинками и порядком показа. Скроллителлинг превращает прокрутку во время: чем ниже читатель, тем дальше он по истории.

Рассказывать можно и без слов

До сих пор мы говорили о тексте. Но на сайте истории рассказывают и картинки, и порядок показа. Визуальный сторителлинг это приёмы, которыми изображение и композиция делают то, что обычно делают слова.

• Последовательность. Три фотографии «до, процесс, после» это уже история. Порядок решает.
• Крупный план и деталь. Одна точная деталь (рука мастера, чертёж с пометками) говорит больше широкого общего плана.
• Подпись это рассказчик. Подписи читают охотно, поэтому в ней можно сказать главное: что на картинке и почему это важно.
• Не показывайте то, чего нет. Стоковая картинка «рукопожатие» ничего не рассказывает ни о вас, ни о клиенте.

И две оговорки. Картинке нужна текстовая альтернатива (атрибут alt): она нужна тем, кто картинку не видит. И, как в уроке о данных, не выдавайте постановку за документ: фото сотрудников с подписью «наши клиенты» это обман.

Проверьте себя: что делает три фотографии историей?

Порядок: «до, процесс, после». Он превращает набор снимков в цепочку событий.

Прокрутка как время

Страница не кино: у неё нет времени. Но у неё есть прокрутка, и она может стать временем: чем ниже читатель опустился, тем дальше он продвинулся по истории. Приём называют скроллителлингом (scrollytelling, от scroll и storytelling). Известный ранний пример: «Snow Fall», материал газеты The New York Times 2012 года про лавину, где текст, фотографии и видео сменяли друг друга при прокрутке.

Бывают три уровня.

1. Просто сцены. Раздел равен сцене, при прокрутке одна сменяется другой. Это обычная страница, и такой подход подходит всем.
2. Появление при прокрутке. Элементы появляются, когда читатель до них дошёл. Это то, что мы сделаем.
3. Закреплённая сцена. Картинка или диаграмма остаётся на месте, а меняется по шагам, пока пролистывается текст. Для этого обычно берут библиотеку (например, Scrollama, ссылка в источниках) или CSS.

Прокрутите блок на схеме ниже и обратите внимание на переключатель: он имитирует настройку «уменьшить движение».

Имитировать «уменьшить движение» Сначала

1. 1. Вы рассказываете о ситуации

   Звонок или заявка: пара минут.

2. 2. Мы называем срок и цену

   До начала работы, письменно.

3. 3. Работа идёт по шагам

   Вы знаете, на каком этапе дело.

4. 4. Вы получаете результат

   И понятный следующий шаг.

Прокрутите блок: каждый шаг появляется, когда виден почти целиком.

Прокрутка средствами CSS (animation-timeline): проверяю….

Проверьте себя: чем «появление при прокрутке» отличается от обычной страницы?

Содержание то же, а подача другая: элементы возникают, когда читатель до них дошёл. Без анимации страница остаётся полноценной.

Прокрутка на CSS

Раньше появление при прокрутке писали на JavaScript. Теперь для простых случаев есть CSS. Два свойства: animation-timeline, которое привязывает анимацию к прокрутке, и функция view(), которая говорит «следи за тем, как элемент входит в окно».

@keyframes reveal {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  .step {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step { animation: none; }
}

Разберём. @keyframes reveal описывает «из прозрачного и сдвинутого в видимое». Правило с animation-timeline лежит внутри @supports, потому что не все браузеры умеют такую прокрутку: браузеры, которые не умеют, это правило пропустят, и шаги останутся обычным списком. Диапазон animation-range задаёт, на каком отрезке прокрутки идёт анимация. А последнее правило отключает анимацию для тех, кто просил систему уменьшить движение.

Поддержка меняется от версии к версии, поэтому проверяйте актуальные данные в справочнике MDN, прежде чем на неё полагаться. Схема выше сообщает, умеет ли это ваш браузер. Важный принцип: анимация добавка, а не условие. Базовая страница должна работать везде.

Проверьте себя: зачем правило с animation-timeline лежит внутри @supports?

Чтобы браузеры без поддержки пропустили его и показали обычный список. Анимация только добавка.

Правила хорошего тона

• Не угоняйте прокрутку. Не меняйте скорость или направление и не перехватывайте колесо мыши: человек должен управлять страницей сам.
• Уважайте «уменьшить движение». Для людей с вестибулярными нарушениями анимации на странице могут вызывать головокружение и тошноту. В руководстве WCAG об этом есть критерий 2.3.3: движение, запущенное действиями человека, можно отключить.
• Анимируйте только то, что дёшево: прозрачность и сдвиг (opacity, transform). Анимация размеров заставляет браузер заново считать раскладку и делает страницу рывками.
• Содержимое доступно без анимации: читается, работает с клавиатуры и в программе чтения с экрана.
• Анимация служит истории, а не украшает её. Если шаг можно показать без движения, пусть так и будет.

Практика

Сделайте блок «Как это работает» из своего пути клиента.

1. Три-пять шагов списком: от первого обращения до результата. Последний шаг приводит к названию вашей кнопки (напишите его слово в слово).
2. Анимация при прокрутке: @keyframes, правило с animation-timeline: view() внутри @supports (animation-timeline: view()).
3. Запасная версия: @media (prefers-reduced-motion: reduce) и animation: none.
4. Выключите анимацию мысленно: страница должна читаться как простой список. Если так, всё сделано правильно.

Когда не нужен скроллителлинг

Короткая страница, форма, прайс, юридический текст в анимации не нуждаются. Она оправдана, если путь длинный и нужно показать, как шаги следуют друг за другом. В остальных случаях лучше хорошая вёрстка и точный текст.