Mouse Over Interaction - Proof of Concept

When I saw the following Dribbble, I knew that it was perfect use for iX2.

Here’s my quick and dirty recreation of the effect.

https://webflow.com/website/mouse-over-page-reveal?s=mouse-over-page-reveal

Feel free to clone and inspect the project. It pretty straight forward to accomplish.

4 Likes

So cool! Gonna modify and use for a project later this month :slight_smile: Thank you for this

Nice! I’d love to see it in action after it’s done.

Haha I tried my own version for my portfolio. I’m thinking the mobile version would have to slide straight down to save space, but I haven’t played with that yet.

This is definitely a desktop effect. A “pull down” effect for mobile would be sweet but would require custom code. On the other hand that wouldn’t be expected behavior for a website in a mobile browser to “pull down” so it might go undiscovered by visitors.

A scroll interaction would work, but I don’t imagine it having the same impact. Must keep thinking. :thinking:

I’ve been trying to implement this for my portfolio site but I’m running into a huge wall. The page hover is constantly active so in order to click to change “pages” I have to either have the click go to another actual page, or have it trigger an animation, which can be interrupted by the page hover interaction if the mouse moves. I’m very close to just dropping it, but the effect is so cool I want to keep trying.

@LOGODUDEabides

Can you share a read-only link?

https://preview.webflow.com/preview/the-prestige?utm_source=the-prestige&preview=7a4460af0459913c05b503313abb02a3

When you click the Logos page and move the mouse you’ll see what I mean.

I went ahead and dropped it for now. I’m just going to use it as a regular menu and paginate. I did come up with a pretty cool reveal on scroll for mobile though, so that’s good.

1 Like