Статичные, отзывчивые и адаптивные веб-плакаты

Во втором модуле студенты первого курса направления «Дизайн и программирование» разрабатывают концепцию фантастического продукта или сервиса — от архитектурного бюро для неадертальцев до лягушачьего такси — и развивают её в течение нескольких модулей.

Студенты осваивают адаптивную вёрстку сайта и принципы веб-анимации, работая над одностраничным веб-сайтом.

Основной упор в работе сделан на сочетание фоновых анимаций с интерактивными элементами. Механика бегущих строк прописана через изменение значения свойства left в keyframes. Веб-плакат богат различными реакциями на взаимодействие с пользователями: детали при наведении мыши могут менять цвет, масштаб и положение или переключать анимацию. В псевдоклассе :hover указаны запуск или остановка плавной зацикленной анимации через animation-play-stated, но иногда анимации проигрывается одноразово. Для большей плавности используется свойство transition.

Другая сильная черта работы — адаптивность. Сайт одинаково хорошо смотрится на экране компьютера, планшете или смартфоне благодаря технологии flexbox. Макет обладает блочной структурой и легко перестраивается, когда в @media query при разных размерах экрана меняются свойств flex-direction, flex-wrap и display.

В плакате «Cave» основную роль играет резиновая вёрстка, адаптивная гармонично дополняет её. Резиновость достигается за счёт использования относительных единиц измерения vw, а адаптивность проявляется в изменении величины отступов и размера текста и изображений.

Бегущие строки дополнены покадровыми анимациями — картинка, на которой нарисован объект в разных состояниях, превращается в движение. Кадры заранее склеены в одно длинное изображение, добавленное как фон элемента и покадрово передвигающееся.

Свойство transform позволяет поворачивать, масштабировать, наклонять или сдвигать элемент в зависимости от значения. Вращение в работе «Курьи ножки» реализовано через rotate, а в «Не шипи» — через transform3d и смену цвета свойством color.