Pop-Hovers

POP hat diese coolen Hover-Effekte in den Boxen, aus denen ihre Homepage besteht. Die Boxen haben standardmäßig einen weißen Hintergrund, und wenn man mit der Maus darüber fährt, gleitet ein dunkler Hintergrund darunter, die Textfarben ändern sich und der Text "springt" ein wenig nach oben. Wenn man die Maus wegnimmt, gleitet der dunkle Hintergrund weg, die Textfarben ändern sich zurück und der Text springt nach unten. Ich dachte, ich versuche, das zu replizieren, weil, Sie wissen schon, verdammt nochmal Hover-Effekte.

Demo

Check out this Pen!

HTML

Jeder Bereich ist eine "Box"

<a href="#" class="box">
  <h2><span>Breaking news -</span> hippos are sorta dangerous</h2>
  <h3>Tonight at nine</h3>
</a>

CSS (Hintergründe)

Das Styling der Standardbox ist trivial. Die Hover-Effekte sind der interessante Teil. POP macht das Hintergrundgleiten, indem es ein tatsächliches Element animiert, dessen Position. Wenn wir damit einverstanden sind, dass dieses Feature nur in Browsern funktioniert, die Verläufe unterstützen, können wir dieses Element weglassen und nur die Hintergrundposition animieren.

Ein halb weißer und halb schwarzer Hintergrund ist einfach

background: linear-gradient(
   white, white 50%, black 50%, black
);

Dann machen wir ihn doppelt so groß wie das Element selbst

background-size: 100% 200%;

So wie das

Tatsächlich werden wir den Hintergrund etwas größer als 200 % machen, da bei genau 200 % immer noch ein kleiner Teil des Hintergrunds im Element sichtbar war (in Chrome).

.box {
  background: linear-gradient(
     white, white 50%, #333 50%, #333
  );
  transition: all 0.2s ease;
}
.box:hover {
  background-position: 100% 100%;
}

CSS (Farben)

Die Standardtextfarbe ist schwarz, daher ist hier überhaupt kein CSS erforderlich. Beim Hovern passen wir die Farben an. Das Ändern des Spans ist nur eine lustige Überraschung und bringt mehr "Pop" in die Party.

.box:hover h2 {
  color: #48ad26;
}
.box:hover h2 span {
  color: white;
}
.box:hover h3 {
  color: #999;
}

CSS (Hüpfen)

Der knifflige Teil hier ist, dass der "Sprung" in *unterschiedliche Richtungen* erfolgt, je nachdem, ob es sich um ein Hovern-Ein oder Hovern-Aus handelt. Die Tatsache, dass sich der Text ein wenig bewegt und dann in seine ursprüngliche Position zurückkehrt, bedeutet, dass ein Übergang uns hier auch nicht helfen wird, das ist Animationsbereich. Wir erstellen eine @keyframes für den Aufwärtssprung und eine weitere für den Abwärtssprung. Ein wenig Padding wird uns helfen, da unsere Box-Sizing-Wahl die Höhe jeder Box gleich hält.

@keyframes up-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 1.5em; }
  100% { padding-top: 2em; }
}
@keyframes down-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 2.5em; }
  100% { padding-top: 2em; }
}

Standardmäßig (wird beim Hovern-Aus ausgelöst) erhält die `.box` den Abwärtssprung und das `:hover` erhält den Aufwärtssprung. Dies entspricht der Richtung, in der der Hintergrund ein- und ausgleitet.

.box {
  animation: down-bump 0.4s ease;
}
.box:hover {
  animation: up-bump 0.4s ease;
}

Anfangssprung-Fix

Das Hinzufügen dieser Animation im Anfangszustand lässt sie sofort beim Laden der Seite laufen. Könnte ein schöner Effekt sein, könnte nervig sein. Die POP-Website führt sie nicht beim Laden aus. Matt Boldt hatte die gute Idee, den Aus-Sprung nur beim Hovern-Aus hinzuzufügen (über eine Klasse), damit er anfangs nicht läuft.

Check out this Pen!

Auf Geräten ohne Hover...

Es sind Links und keine wichtigen Inhalte sind verborgen, also keine große Sache.