How is this made?

Hi,

I just saw a really cool hover sensitive menu, which I couldn’t stop playing with.

Here it is: http://younusabdalla.com/

What skillset would one need to create something like that? Anyone know how it’s made? Obviously it’s JS but how much JS do you think something like that would need?

I think it’s funny this site disables itself when you open up the console.

Just a lot of animations. I don’t think it would be that complicated. You could probably do quite a bit of it with CSS.

I haven’t done too much of this. But this is a great video that will kinda give you an idea of what’s happening:

Wow that is impressive! It looks like a combination of CSS3 animations, with certain elements having an animation trigger on hover. There is also Javascript involved changing images and such. It’s hard to pinpoint exactly what was happening since it’s in a video form and you would need to interact with the website directly to figure it out. But yeah the animations on hover can do things like move, zoom, stretch, etc. on images for a set time and such. It’s pretty cool stuff.

CSS Animations
- W3C schools about animations.

Also Derek Banas has a channel on youtube with a 50 minute video all about CSS, near the end he talks about the animations - great quick tutorial that I recommend.

With Javascript you can swap out images when certain conditions occur by evaluating a property with an event handler- then swap images from an array.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.