View demo Download source
Today we’d like to share a simple morphing effect with you. The idea is to have a search input in the upper right corner of the page and once the input is clicked, the whole search element expands to a fullscreen overlay. The fullscreen overlay has a bigger search input and some elements for showing related items or the search results. Note that we just made a dummy that does not actually search dynamically.
For the morphing search effect we use several transitions that animate the dimensions of the search input, the font size and some other elements. Please note that it’s very experimental and only tested in the latests versions of modern browsers.
The background image used in the demo is from Unsplash and the icons are from Font Awesome.
0 comments:
Post a Comment