Design

Hover Preview Effect with Mini Map

An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.

From our sponsor: What if Your Project Management Tool Was Fast and Intuitive? Try Shortcut.

I find mini maps really exciting. These tiny UI components can give visual feedback on where we are on a page, e.g. what we are hovering or viewing. Sometimes this helps create a representation of content and ease navigation. But we can also go crazy and try some experimental stuff with it! And that’s exactly what I would like to share with you today.

The main idea is to use a hover effect in order to preview some content. Like a giant tooltip. Since this large preview will cover the whole page (including the thing we are hovering) we use a mini map to guide us. This map shows where we are with the mouse.

The design and animation for this demo is based on the beautiful website of La Culture des Lieux (by extra l’agence). Have a look at it, it’s a wonderful scroll-based design with lots of creative animations. The epic photography used in this demo are by Frankie Cordoba.

The initial view of our demo is a set of three thumbnails:

When we hover over any of the thumbs, we animate some content in:

We also show a mini map that maps the movements of the pointing device to a small representation of the three thumbnails. This indicates where we are at the moment. As soon as we move the mouse away from the thumbnail, the content pops back in and we see the initial thumbnails view.

Have a look at the entire interaction flow:

There are two demos. The first one hides the cursor on hover. The second one shows a custom cursor with a larger appearance while hovering the thumbnails.

Note that this is a highly experimental concept! Obviously this should be some kind of add-on to a design. For mobile, some other interaction and solution would have to be used.

If you are in love with mini maps like me, you might enjoy the Grid Zoom Layout that contains a tiny grid version when opening the content.

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.

Back to top button