Содержание
Итак, мы разобрались, что такое веб-плакат, чем он отличается от печатного плаката, лендинга и сайта. Теперь стоит заглянуть внутрь самого формата — потому что веб-плакаты бывают разными. Технически их можно разделить на два типа: статичные и динамичные. Названия немного обманчивы, так что давайте сразу уточним, что за ними стоит.
Статичный плакат
Первое и самое частое заблуждение: «статичный веб-плакат — это плакат без анимации». Это не так. Статичные веб-плакаты могут быть очень живыми визуально — с вращающимися элементами, пульсирующими формами, мерцающими фонами и переливающимися градиентами. Слово «статичный» здесь описывает технический подход, а не визуальный результат.
Статичный веб-плакат создаётся средствами HTML и CSS — без JavaScript. Всё движение на странице реализовано через CSS-инструменты: @keyframes задают циклические анимации, transitions обеспечивают плавные переходы между состояниями, а псевдокласс :hover позволяет элементам реагировать на наведение курсора. Этих инструментов достаточно, чтобы создать визуально насыщенную, живую страницу.
Что при этом отсутствует — это реакция на конкретные действия пользователя. Статичный плакат не знает, куда вы кликнули, не отслеживает положение курсора, не реагирует на перетаскивание элементов. Анимации в нём запрограммированы заранее и проигрываются по своему сценарию — зритель наблюдает и скроллит, но не управляет.
В образовательной программе Школы дизайна статичный веб-плакат — это проект второго модуля. Студенты к этому моменту освоили HTML и CSS, но ещё не приступили к JavaScript. Формат идеально показывает, сколько выразительности можно вытянуть из всего лишь двух технологий.
Динамичный плакат
Динамичный веб-плакат наследует всё, что есть у статичного, — те же CSS-анимации, ту же вёрстку, те же композиционные структуры. Но поверх этого появляется JavaScript с его addEventListener() — обработчиками событий. И это меняет природу взаимодействия.
Теперь плакат может реагировать на клик, отслеживать движение мыши, обрабатывать скролл программно, воспринимать касания на мобильных устройствах. Появляется возможность перетаскивания элементов по странице. Можно скрывать и показывать слои, менять состояния по условию, выстраивать сценарии взаимодействия.
Принципиальная разница с статичным типом — в направлении коммуникации. Статичный плакат транслирует: он проигрывает заложенный автором сценарий, зритель наблюдает. Динамичный плакат реагирует: он отвечает на действия зрителя, подстраивается, раскрывает новые слои. Коммуникация из монолога превращается в диалог.
На практике это выглядит так: в статичном плакате вы видите, как элементы вращаются и пульсируют по заданному ритму. В динамичном — вы наводите курсор, и элементы разлетаются от него, или кликаете на объект и он раскрывает скрытое содержание, или перетаскиваете форму и под ней обнаруживается текст. Каждое ваше действие — это ввод, на который плакат даёт визуальный ответ.
Одноэкранный формат
С появлением JavaScript-интерактивности возникает ещё одна штука, которой у статичных плакатов, как правило, нет, — одноэкранный формат. Это плакат, в котором всё происходит в рамках видимой области браузера, без скролла вообще. Повествование строится целиком через взаимодействие: клики открывают модальные окна, наведение меняет состояния, действия зрителя переключают визуальные режимы.
Одноэкранный формат требует другого подхода к проектированию. Вся коммуникация должна поместиться в одном видимом поле, а интерактивные элементы должны быть достаточно заметными, чтобы зритель понял — здесь можно что-то сделать. В статичном плакате скролл сам подсказывает «двигайся дальше». Здесь такой подсказки нет
Одноэкранный формат требует другого подхода к проектированию. Вся коммуникация должна поместиться в одном видимом поле, а интерактивные элементы должны быть достаточно заметными, чтобы зритель понял — здесь можно что-то сделать. В статичном плакате скролл сам подсказывает: «двигайся дальше». Здесь такой подсказки нет.
Какой выбрать
Статичный и динамичный — это не хуже и лучше, скучнее или круче, проще или сложнее. Это два набора инструментов, каждый из которых подходит для своих задач.Статичный плакат хорош там, где визуальная экспрессия самодостаточна: плотные анимации, ритмичные композиции, выстроенный скролл-нарратив. Он проще в реализации, предсказуемее в поведении и позволяет сосредоточиться на графическом решении, не отвлекаясь на программирование сценариев взаимодействия.
Динамичный плакат раскрывается там, где важен диалог со зрителем: скрытые слои, реакция на действия, нелинейные сценарии. Он сложнее технически, но открывает возможности, недоступные в рамках чистого CSS, — от отслеживания позиции курсора до генерации визуальных элементов в реальном времени.
В учебной программе Школы дизайна эти типы разведены по модулям не случайно. Сначала студент осваивает выразительные возможности CSS — и убеждается, что их много. Затем добавляет JavaScript — и получает инструменты для принципиально нового уровня взаимодействия. Каждый шаг опирается на предыдущий.
На этом мы завершаем первую главу — теперь у вас есть понимание того, что такое веб-плакат, чем он отличается от смежных форматов и какие типы существуют внутри него. В следующей главе поговорим о том, зачем вообще стоит создавать веб-плакат и куда этот опыт может привести.
