Интересный морфинг девайсов в веб-дизайне

В данном уроке мы рассмотрим нечто новенькое, а именно слайд-шоу по технологии морфинга, эта технология в современно веб-дизайне встречается крайне редко, но набирает оборотов. Идея заключается в плавном переходе между различными устройствами, которые показывают скриншот адаптивного дизайна сайта или приложения, применяя различные классы устройства. Слайдер будет выполнен в минималистическом стиле. Используя одинаковые элементы и псевдо-элементы для всех устройств, мы можем создать интересный эффект морфинга.



Начнем с того, что мы будем контролировать классы и переключение изображений при помощи javascript. Кроме этого мы добавим автоматические пролистывание слайдов с переворотом девайсов, это будет выглядеть весьма интересно.



Есть четыре устройства, которые мы будем использовать для отображения различных скриншотов с адаптивным дизайном. Для некоторых из них мы будем использовать опцию вращения. Мы будем менять классы в зависимости от отображаемого устройства, а так как все устройства имеют определенные переходы, мы увидим эффект морфинга. Следует обратить внимание, что данные трансформации поддерживают не все браузеры, и пример является экспериментальным.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.