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

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

Сложность

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

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

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

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

Перевод статьи Morphing Devices

Тэги: transitionanimatetransform

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.