Uniqlo Stripe Hovers

Für die größeren Werbeboxen im Design von Uniqlo.com werden animierte Streifen verwendet, die beim Überfahren mit der Maus erscheinen. Das ist ziemlich genial, wenn Sie mich fragen. Vielleicht, weil sie den Vorteil mit so vielen verschiedenen Browsern wie möglich teilen wollten, haben sie ein animiertes GIF verwendet, um den Effekt zu erzielen. Es ist mit 4K recht klein, aber wie wir hier wissen, ist es auch eine weitere HTTP-Anfrage. Lassen Sie uns den Effekt im Stil von progressive enhancement nachbilden: weniger Browserunterstützung, aber effizienter.

Das HTML

Wir *könnten* dies mit *nur* dem Elternelement tun, indem wir seinen Hintergrund auf :hover auf animierte Streifen ändern. Die Streifen auf Uniqlo blenden jedoch ein, sie erscheinen nicht einfach sofort. Leider gibt es für uns keine background-opacity, zu der wir überblenden könnten, um uns zu helfen.

Wir könnten stattdessen das ::before Pseudo-Element verwenden und die Opazität nutzen, um das Ganze ein- und auszublenden, aber die Unterstützung für Übergänge bei Pseudo-Elementen fängt gerade erst an, akzeptabel zu werden.

Nur dieses eine Mal verwenden wir ein zusätzliches Element, um unseren speziellen Hintergrund zu handhaben

<div class="product">
  <div class="product-hover"></div>

  <!-- all the product information and stuff -->
</div>

Das CSS

Das .product hat etwas Padding, das im Wesentlichen den dicken weißen Rand freilegt, wo die animierten Streifen erscheinen werden.

.product {
  background: white;
  padding: 20px;
  position: relative;
}

Wenn wir dann unser .product-hover absolut an jeder Ecke positionieren, wird der Hintergrund davon in diesem 20px padding um das Produkt herum angezeigt. Standardmäßig setzen wir die opacity auf 0, damit es nicht sichtbar ist.

.product-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

Die Streifen

Um nun den animierten „Barberpole“-Streifen zu erstellen, müssen wir einen linearen Gradienten von 45 Grad verwenden, um ein wiederholbares Quadrat zu erzeugen, das wie Streifen aussieht. Hier ist der Code dafür.

.product-hover {
  background-size: 30px 30px;
  background-image: linear-gradient(
    45deg, 
    rgba(black, 0.1)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(black, 0.1)  50%, 
    rgba(black, 0.1)  75%, 
    transparent       75%, 
    transparent
  );  
}

Es gibt auch einige diagonale Streifen in Lea Verous Mustergalerie. Der Code ist auch etwas leichter, aber er erlaubt nicht, dass der Hintergrund weiß oder transparent ist.

So funktioniert der Gradient

Das ist alles Standard-CSS, außer dem „schwarzen“ Wert in der RGBa-Angabe, der durch Sass ermöglicht wird.

Dieser 30px x 30px große Block ist perfekt wiederholbar und füllt das .product-hover mit Streifen.

Die Streifen einblenden

Es ist ein eigenständiges Element, also ist es sehr einfach

.product:hover .product-hover {
  opacity: 1;
}

Das ist jedoch ein sofortiges Einblenden. Um das Ein- und Ausblenden zu realisieren, setzen wir eine CSS3 transition.

.product-hover {
  transition: opacity 0.3s ease;
}

Die Streifen animieren

Wir brauchen hier animation (im Gegensatz zu transition), da wir möchten, dass sich die Streifen unendlich animieren.

Das Verschieben der background-position des .product-hover ändert, wo unsere kleine 30px x 30px Box beginnt, und lässt sie dadurch wie eine Barberstange erscheinen.

@keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 60px 30px; }
}

Dann setzen wir diese Animation auf das Element, lassen sie linear (ohne Beschleunigung) ablaufen und sich unendlich wiederholen

.product-hover {
  animation: barberpole 0.5s linear infinite;
}

Demo

Und fertig! Demo auf CodePen

Check out this Pen!