Skip to content

Instantly share code, notes, and snippets.

@DavidStrada
Last active March 24, 2017 16:15
Show Gist options
  • Save DavidStrada/3269058 to your computer and use it in GitHub Desktop.
Save DavidStrada/3269058 to your computer and use it in GitHub Desktop.
JS: Animation for a hover with 'mouse direction'
$(".overlayLink").bind("mouseenter mouseleave",function(e){
/** the width and height of the current div **/
var w = $(this).width();
var h = $(this).height();
/** calculate the x and y to get an angle to the center of the div from that x and y. **/
/** gets the x value relative to the center of the DIV and "normalize" it **/
var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - this.offsetTop - (h/2)) * ( h > w ? (w/h) : 1 );
/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
/** first calculate the angle of the point,
add 180 deg to get rid of the negative values
divide by 90 to get the quadrant
add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 ) % 4;
/** do your animations here **/
switch(direction) {
case 0:
/** animations from the TOP **/
break;
case 1:
/** animations from the RIGHT **/
break;
case 2:
/** animations from the BOTTOM **/
break;
case 3:
/** animations from the LEFT **/
break;
}});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment