Lecaw

Учимся создавать Web-сайты

Морфинг устройств / Эффект морфинга

May 16, 2013 210hits

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

ДЕМО Исходные файлы

 

 

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

Для вращения устройств добавим еще один класс, который будет вращать устройство на 90 градусов.

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

Лучшей технологией для применения такого эффекта является, несомненно, SVG, но для практичности мы запустим его с CSS и JS.

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий