Статичные, отзывчивые и адаптивные веб-плакаты
Во втором модуле студенты первого курса направления «Дизайн и программирование» разрабатывают концепцию фантастического продукта или сервиса — от архитектурного бюро для неадертальцев до лягушачьего такси — и развивают её в течение нескольких модулей.
Студенты осваивают адаптивную вёрстку сайта и принципы веб-анимации, работая над одностраничным веб-сайтом.
Автор: Софья Орехова
Основной упор в работе сделан на сочетание фоновых анимаций с интерактивными элементами. Механика бегущих строк прописана через изменение значения свойства left в keyframes. Веб-плакат богат различными реакциями на взаимодействие с пользователями: детали при наведении мыши могут менять цвет, масштаб и положение или переключать анимацию. В псевдоклассе :hover указаны запуск или остановка плавной зацикленной анимации через animation-play-stated, но иногда анимации проигрывается одноразово. Для большей плавности используется свойство transition.
Автор: Софья Орехова
Другая сильная черта работы — адаптивность. Сайт одинаково хорошо смотрится на экране компьютера, планшете или смартфоне благодаря технологии flexbox. Макет обладает блочной структурой и легко перестраивается, когда в @media query при разных размерах экрана меняются свойств flex-direction, flex-wrap и display.
Автор: Анастасия Веденяпина
В плакате «Cave» основную роль играет резиновая вёрстка, адаптивная гармонично дополняет её. Резиновость достигается за счёт использования относительных единиц измерения vw, а адаптивность проявляется в изменении величины отступов и размера текста и изображений.
Автор: Анастасия Веденяпина
Бегущие строки дополнены покадровыми анимациями — картинка, на которой нарисован объект в разных состояниях, превращается в движение. Кадры заранее склеены в одно длинное изображение, добавленное как фон элемента и покадрово передвигающееся.
Автор: Алина Колбасина
Автор: Дарья Любивая
Свойство transform позволяет поворачивать, масштабировать, наклонять или сдвигать элемент в зависимости от значения. Вращение в работе «Курьи ножки» реализовано через rotate, а в «Не шипи» — через transform3d и смену цвета свойством color.
Автор: Ирина Аполонник
