Direction Aware Hover Effects

Das ist ein besonderer Design-Trick, der immer wieder ins Auge fällt! Ich kenne die genaue Geschichte nicht, wer was zuerst gedacht hat und so weiter, aber ich weiß, dass ich im Laufe der Jahre viele Implementierungen davon gesehen habe. Ich dachte, ich fasse hier ein paar davon zusammen.

Noel Delagado

Siehe den Pen Direction-aware 3D hover effect (Concept) von Noel Delgado (@noeldelgado) auf CodePen.

Die Erkennung erfolgt hier durch Verfolgung der Mausposition bei mouseover und mouseout und Berechnung, welche Seite überquert wurde. Es ist eine kleine Menge cleveres JavaScript, dessen Kern darin besteht, diese Richtung zu ermitteln

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;
};

Dann werden je nach Richtung Klassennamen angewendet, um die direktionale CSS-Animation auszulösen.

Fabrice Weinberg

Siehe den Pen Direction aware hover pure CSS von Fabrice Weinberg (@FWeinb) auf CodePen.

Fabrice verwendet hier nur reines CSS. Sie erkennen zwar nicht die ausgehende Richtung, aber sie erkennen die eingehende Richtung durch vier versteckte hoverbare Boxen, die jeweils zu einem Dreieck gedreht sind. So

Codrops

In einem Artikel von Mary Lou auf Codrops aus dem Jahr 2012, Direction-Aware Hover Effect with CSS3 and jQuery, wird die Erkennung ebenfalls in JavaScript durchgeführt. Hier ist dieser Teil des Plugins

_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;
},

Die Animation selbst wird jedoch technisch von CSS durchgeführt, da Inline-Stile bei Bedarf auf die Elemente angewendet werden.

John Stewart

Siehe den Pen Direction Aware Hover Goodness von John Stewart (@johnstew) auf CodePen.

John setzte auf Greensock, um die gesamte Erkennung und Animation zu übernehmen. Wie bei allen Beispielen gibt es seine eigenen hausgemachten geometrischen Berechnungen, um die Richtung zu ermitteln, in der die Elemente gehovert wurden.

// Detect Closest Edge
function 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 Formula
function distMetric(x,y,x2,y2) {
    var xDiff = x - x2;
    var yDiff = y - y2;
    return (xDiff * xDiff) + (yDiff * yDiff);
}

Gabrielle Wee

Siehe den Pen CSS-Only Direction-Aware Cube Links von Gabrielle Wee ✨ (@gabriellewee) auf CodePen.

Gabrielle erledigt das komplett in CSS, indem sie vier hoverbare Kindelemente positioniert, die die Animation auf einem Geschwisterelement (dem Würfel) auslösen, je nachdem, welches gehovert wurde. Hier gibt es einige knifflige Dinge mit clip-path und Transfomationen, die ich zugegebenermaßen nicht ganz verstehe. Die hoverbaren Bereiche scheinen nicht dreieckig zu sein, wie man es erwarten könnte, sondern Rechtecke, die die Hälfte der Fläche abdecken. Es scheint, als würden sie ineffektiv überlappen, aber das tun sie nicht. Ich glaube, es liegt daran, dass sie leicht über die Ränder hinausragen und so einen Hover-Bereich schaffen, der jeder Kante eine vollständige Randabdeckung ermöglicht.

Elmer Balbin

Siehe den Pen Direction Aware Tiles using clip-path Pure CSS von Elmer Balbin (@elmzarnsi) auf CodePen.

Elmer verwendet hier ebenfalls clip-path, aber die vier hoverbaren Elemente sind zu Dreiecken ausgeschnitten. Man sieht, dass jedes von ihnen einen Punkt in der Mitte bei 50% 50% hat und zwei weitere Eckpunkte.

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

Reines JavaScript treibt Nigels Demo hier an, die alles modernisiert ist, um mit npm und Modulen und allem Drum und Dran zu funktionieren. Es sind jedoch vertraute Berechnungen

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;
};

Das JavaScript wendet letztendlich Klassen an, die in CSS basierend auf einigen schicken Sass-generierten Animationen animiert werden.

Giana

Ein rein CSS-Ansatz, der die ausgehende Richtung gut handhabt!

Siehe den Pen CSS-only directionally aware hover von Giana (@giana) auf CodePen.

---

Haben Sie noch andere gesehen? Haben Sie das jemals bei etwas verwendet, das Sie erstellt haben?