Концепт морфинг кнопки

Концепт морфинг кнопки

Всем привет. Сегодня мы рассмотрим вдохновляющий концепт морфинг кнопки, несколько не понятно на первый взгляд. Но на самом деле все гениально, просто и круто! Здесь элемент действия – кнопка – трансформируется в другой объект.

В демонстрации вы увидите, как кнопка по нажатию превращается в модальное окно, сайдбар, форму и прочее!

Авторы на Codrops остерегают нас, так как этот концепт предназначен только для вдохновения. Он довольно сырой и поддерживает только современные браузеры!

[ ДЕМО ]

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

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

Морфинг элемента действия в фактический компонент, который позволяет выполнить действие, является интересной концепцией. Конечно же, ее можно применить в разнообразных ситуациях. Есть что-то привлекательное в этом концепте, но обратите внимание, что контентная область “исчезает” из потока.

При работе с оверлеями, это может быть не большой проблемой, но в некоторых случаях, присутствие данной области в пользовательском интерфейсе приносит пользу. Какие у вас мысли на этот счет? Как вы думаете, это интересная взаимодействие?