CodePen

Loading ..................

Direction-aware 3D hover effect

Description

After seeing this site http://fitzfitzpatrick.com/ I decided to give a try to the "direction-aware hover effect". My first thought was to do it with a pure CSS, not too late I changed my mind and decided to use JS (I need to sleep anyway).

It's kind of simple, using JS we can easily detect the direction the cursor is coming, then, I am using CSS animations for each case (8 in total).

Tags

  1. css3
  2. animation
  3. transform
  4. hover
  5. 3d

Comments

  1. Wow that is amazing, really great work! I think you took the inspiration you got from the Fitz site and improved on it. Very cool.

  2. This is great!

    Only thing I noticed is that when you hover closer to the right side of a box and move up and down, the box moves like it's coming from the right side, and not up and down. It makes a bigger difference when you make the boxes smaller (which is what I'm trying to use on my site). I don't know enough about CSS3 to try and fix it :(

  3. Quick question. I notice your html has no <> or </> in it... I am new to this and it is different than what I learned. I would love to use this for a site, but I don't know how to adapt it for squarespace...

  4. what if i wanna put anchor tag inside of info division,

    if i do remove pointer-events there is a unnamed bug inside can u tell me the fix

    and another bug we cant give position:relative to main container or wrapper...

    plz fix it asap :)

  5. Is this working ok on IE 10? because i tested this and it was broken. Or it's my problem? Anyone?

  6. Here is a POC for CSS only, although not as feature rich of course: http://codepen.io/Merri/full/ybHau

  7. Love this so much and am bummed... The in and out works, but it adds bottom to everything no matter which direction I am coming from. When it returns "d" it is always 2. Guh!

  8. @moseke i keep getting the same thing - i don't suppose you managed to find a way around this? I just keep getting "bottom" added rather than relevant directions :o( - Any help would be massively appreciated.

Leave a Comment Markdown supported. Double-click names to add to comment.

You must be logged in to comment.
  • 87881 Views
  • 20 Comments
  • 1133 Hearts
Loading...
Loading...