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

Для морфинга поиска мы используем несколько эффектов, которые анимируют размеры поисковой строки, размер шрифта и некоторые другие элементы. 

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

Фоновое изображение, используемое в демо-примере позаимствовано на Unsplash, а иконки Font Awesome.

Форма входа в обычном состоянии:

При нажатии на поиск, он будет расширяться в полноэкранный режим:

Демо тут, исходники тут.

Оригинал: tympanus.net

Перевод: Google feat Art