Простой трансформирующийся поиск

Опубликовал: 4 года назад CSS

Добрый день, дорогие друзья. Сегодня разберем с вами трансформирующийся поиск (Morphing Search). Данный эффект позволяет превращать обычный input элемент в полноэкранное наложения.

Идея в том, чтобы увеличить ввод поиска и показать некоторые соответствующие контента или поиска результатов.

Трансформирующийся поиск

9kmnsh6CCqGbP3b

Демо Скачать

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

Обратите внимание, что это лишь пустышка и никакого поиска внутри — вы не найдете. Все это можно реализовать уже на PHP, но это уже другая тема для разговора.

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

Фоновое изображение использованное в данном примере от Unsplash.

Трансформирующийся Поиск

Пожалуйста, обратите внимание на то, что полноэкранный поиск не работает в Firefox (версия 33) должным образом — отсутствуют переходы. Эта ошибка связана с изменением переполнения родительского элемента. Подробней можно прочитать в данной теме.

Надеюсь, что вам понравиться данный эксперимент и он вдохновит вас на интересные решения. На этом я с вами прощаюсь, до скорой встречи. Оставляйте комментарии и рассказывайте друзьям. Лучший получит игру!

Демо: трансформирующийся поиск

Источник: Codrops


Новая система комментариев
comments powered by HyperComments