Design

Image Tiles Menu Animation | Codrops

An animation featuring image tiles that transform into a full image when a menu item is clicked.


From our sponsor: Connect Design and Development to Deliver Better Customer Experiences with Applitools Centra.

Today I’d like to share a little menu effect with you. Basically it’s an animation with image tiles that transform into a full image when a menu item is clicked.

The demo starts with a menu that overlays an image split into four tiles that are scattered around the menu. On hover, the image pieces change, depending on the menu item. When a user clicks on a menu item, the respective image tiles animate to form a full image and some more content is shown while the menu disappears.

Our initial view is the following:

When we choose a menu item and click on it, the image pieces animate to one whole image and the respective content appears:

Here we then have a slideshow mockup as an idea what we could show in this content screen.

This is how it looks in action:

Hope you enjoy this little animation and find it inspiring!

The images for this demo were generated with Midjourney.

Source link

Show More

admin

Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button