Efectos de desplazamiento con reconocimiento de dirección

¡Este es un truco de diseño particular que nunca deja de llamar la atención de la gente! No conozco la historia exacta de quién pensó en qué primero y todo eso, pero sé que he visto varias implementaciones a lo largo de los años. Pensé en reunir algunos de ellos aquí.

Noel Delagado

La detección aquí se realiza rastreando la posición del mouse mouseovery mouseoutcalculando qué lado se cruzó. Es una pequeña cantidad de JavaScript inteligente, cuya esencia es descubrir esa dirección:

var getDirection = function (ev, obj) {    var w = obj.offsetWidth,        h = obj.offsetHeight,        x = (ev.pageX - obj.offsetLeft - (w / 2) * (w  h ? (h / w) : 1)),        y = (ev.pageY - obj.offsetTop - (h / 2) * (h  w ? (w / h) : 1)),        d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;      return d;};

Luego, los nombres de las clases se aplican según esa dirección para activar las animaciones CSS direccionales.

Fabrice Weinberg

Fabrice usa solo CSS puro aquí. No detectan la dirección de salida, pero sí detectan la dirección de entrada a través de cuatro cajas ocultas que se pueden desplazar, cada una girada para cubrir un triángulo. Como esto:

codrops

En un artículo de Mary Lou sobre Codrops de 2012, Direction-Aware Hover Effect con CSS3 y jQuery , la detección también se realiza en JavaScript . Aquí está esa parte del complemento:

_getDir: function (coordinates) {    // the width and height of the current div    var w = this.$el.width(),        h = this.$el.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        x = (coordinates.x - this.$el.offset().left - (w / 2)) * (w  h ? (h / w) : 1),        y = (coordinates.y - this.$el.offset().top - (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) **/        direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;    return direction;},

Sin embargo, técnicamente es CSS quien hace la animación, ya que los estilos en línea se aplican según sea necesario a los elementos.

Juan Stewart

John se apoyó en Greensock para hacer todo el trabajo de detección y animación aquí. Como todos los ejemplos, tiene sus propias matemáticas geométricas propias para calcular la dirección en la que se desplazan los elementos.

// Detect Closest Edgefunction closestEdge(x,y,w,h) {    var topEdgeDist = distMetric(x,y,w/2,0);    var bottomEdgeDist = distMetric(x,y,w/2,h);    var leftEdgeDist = distMetric(x,y,0,h/2);    var rightEdgeDist = distMetric(x,y,w,h/2);    var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);    switch (min) {        case leftEdgeDist:            return "left";        case rightEdgeDist:            return "right";        case topEdgeDist:            return "top";        case bottomEdgeDist:            return "bottom";    }}// Distance Formulafunction distMetric(x,y,x2,y2) {    var xDiff = x - x2;    var yDiff = y - y2;    return (xDiff * xDiff) + (yDiff * yDiff);}

Gabrielle Wee

Gabrielle lo hace completamente en CSS colocando cuatro elementos secundarios que se pueden desplazar que activan la animación en un elemento hermano (el cubo) dependiendo de cuál se haya desplazado. Hay algunas cosas complicadas aquí que involucran clip-pathy transforman que admito que no entiendo del todo. Las áreas sobre las que se puede pasar el cursor no parecen ser triangulares como cabría esperar, sino rectángulos que cubren la mitad del área. Parece que se superpondrían de manera ineficaz, pero no lo parece. Creo que podría ser que cuelguen ligeramente de los bordes, dando un área de desplazamiento que permite que cada borde cubra completamente el borde.

Elmer Balbín

Elmer también usa clip-path aquí, pero los cuatro elementos que se pueden desplazar están recortados en triángulos. Puedes ver como cada uno de ellos tiene un punto en el 50% 50%, el centro del cuadrado, y tiene otros dos puntos en las esquinas.

clip-path: polygon(0 0, 100% 0, 50% 50%)clip-path: polygon(100% 0, 100% 100%, 50% 50%);clip-path: polygon(0 100%, 50% 50%, 100% 100%);clip-path: polygon(0 0, 50% 50%, 0 100%);

Nigel O’Toole

JavaScript sin formato impulsa la demostración de Nigel aquí , que está completamente modernizada para funcionar con npm y módulos y todo eso. Sin embargo, son cálculos familiares:

const _getDirection = function (e, item) {  // Width and height of current item  let w = item.offsetWidth;  let h = item.offsetHeight;  let position = _getPosition(item);  // Calculate the x/y value of the pointer entering/exiting, relative to the center of the item.  let x = (e.pageX - position.x - (w / 2) * (w  h ? (h / w) : 1));  let y = (e.pageY - position.y - (h / 2) * (h  w ? (w / h) : 1));  // Calculate the angle the pointer entered/exited and convert to clockwise format (top/right/bottom/left = 0/1/2/3).  See https://stackoverflow.com/a/3647634 for a full explanation.  let d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;  // console.table([x, y, w, h, e.pageX, e.pageY, item.offsetLeft, item.offsetTop, position.x, position.y]);  return d;};

En última instancia, JavaScript aplica clases, que están animadas en CSS en función de algunas animaciones sofisticadas generadas por Sass .

giana

¡Una toma solo de CSS que maneja muy bien la dirección de salida!

Seen any others out there? Ever used this on something you’ve built?