octocatstartv
Loading ..................

Direction-aware 3D hover effect (Concept)

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. So good, love it!

  2. Very smooth. Nice work :)

  3. Awesome, may i use it?

  4. 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.

  5. that's gorgeous

  6. very smooth !

  7. This. Is. Amazing. Great job!

  8. amazing work :)

  9. 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 :(

  10. 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...

  11. 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 :)

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

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

  14. 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!

  15. @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.

  16. Excellent animated example! looks great on mac using safari, thanks!

  17. Hi! Amazing work! :)

    I hope this is not too late, but if we want to give a relative position to the parent, especially if we have to scroll down ( d always returns 2 as said above), I managed to get it working by replacing :

    obj.offsetLeft by ( obj.getBoundingClientRect().left + window.pageXOffset ) obj.offsetTop by ( obj.getBoundingClientRect().top + window.pageYOffset)

    in the getDirection function. You have to keep the parenthesis or extract a variable in order to keep it clean. If we use jQuery, $obj.offset().left and $obj.offset().top also work.

    I hope it can help someone :)

  18. Buenos días, Noel. Me encanta tu animación, muchas gracias por tu trabajo y por hacerla posible!! Pero hay algo que no me queda bien y no sé cómo resolverlo: yo la he usado para imágenes de 240 de altura por 335 de ancho. Al no ser imágenes cuadradas, el valor de "perspective" no me sirve para ambos ejes, y cuando logro que en el eje horizontal se esconda toda la capa, en el eje vertical se queda parte de ella, y viceversa. ¿Cómo podría arreglarlo, hay alguna solución?? Me ayudarías mucho si pudieras darme una pista...gracias!!!

  19. This is really cool!

  20. when i copy this to my website it will not work any idea why this happens?

  21. Amazing! Great job.

Leave a Comment Markdown supported. Click usernames to add to comment.

You must be logged in to comment.
  • 157349 Views
  • 27 Comments
  • 1913 Hearts
Loading...
Loading...
Loading...