Diagonal Stripes Wipe Animation

Ich habe neulich ein Spiel auf Apple Arcade namens wurdweb gespielt. Es ist ein lustiges kleines Spiel! Kleine Details wie die kleinen Form-Dudes, die über den Bildschirm laufen (aber sonst nichts tun), verleihen ihm viel Charakter. Ich hätte gerne kleine Form-Dudes, die auf Websites herumlaufen. Aber eine andere UI-Entscheidung fiel mir auf: die Art und Weise, wie Übergänge zwischen Bildschirmen diagonale Linien haben, die wachsen und den Bildschirm füllen, wie sich schließende Jalousien, irgendwie.

Hier ist ein kurzes Screencast, das zeigt, wie diese Wipes funktionieren

Ich wollte mich daran versuchen, dies zu erstellen.

Das erste, was mir in den Sinn kam, war repeating-linear-gradient und wie das zum Erstellen von Streifen verwendet werden kann. Also sagen wir, wir richten es so ein

.gradient {
  background-image:
    repeating-linear-gradient(
      45deg,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

Das würde uns Streifen wie diese geben

Wir können jedoch transparent als Farbe verwenden. Das bedeutet, wenn wir den Bildschirm mit solchen Streifen bedecken würden, könnten wir durchscheinen, wo sich diese Farbe befindet. Sagen wir, so

In dieser Gradientendefinition verwenden wir 10px als „Start“ und 20px als „Ende“ des Gradienten, bevor er sich wiederholt. Ein Teil des Tricks hier ist, dieses 20px „Ende“ gleich zu halten und die „Start“-Zahl dazu hochzuzählen. Wenn wir das tun, wird der Bildschirm tatsächlich mit einer soliden Farbe bedeckt. Das Problem ist... wie animiert man es? Das kannst du nicht tun

Was wir tun müssen, ist, nur diesen „Start“-Pixelwert zu animieren. Wir können eine benutzerdefinierte Eigenschaft verwenden, aber es ist ein wenig knifflig, denn ohne sie zu deklarieren, sind benutzerdefinierte Eigenschaften nur Zeichenketten und keine animierbaren Längen. Also müssten wir es so machen.

@property --start {
  syntax: "<length>";
  inherits: false;
  initial-value: 10px;
}
#cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    45deg,
    #ff8a00,
    #ff8a00 var(--start),
    transparent var(--start),
    transparent var(--end, 20px)
  );
  animation: cover 1s linear infinite;
}
@keyframes cover {
  to {
    --start: 20px;
  }
}

Wir müssen @property hier verwenden, was ich wirklich mag, aber leider hat eine eingeschränkte Browserunterstützung. Es funktioniert aber! Ich habe all das eingerichtet, einschließlich einer schnellen prefers-reduced-motion Media Query. Ich verwende ein kleines bisschen JavaScript, um den Hintergrund auf halbem Weg durch die Animation zu ändern (während der Bildschirm bedeckt ist), damit Sie sehen können, wie es für einen Bildschirmübergang verwendet werden könnte. Beachten Sie auch hier, dass dies im Moment nur in Chromium-basierten Browsern funktioniert

Beachten Sie, dass ich auch CSS-benutzerdefinierte Eigenschaften für andere Dinge verwendet habe, wie den Winkel und die Größe der Streifen und die Geschwindigkeit der Animation. Sie sind beide sehr einfach zu ändern! Ich habe knobs eingebaut, damit Sie die Dinge nach Belieben anpassen können. Knobs? Ja, die sind cool

Das Ganze begann als Tweet. In diesem Fall bin ich froh, dass Temani Afif mit einer Möglichkeit, es mit masks zu machen, aufgetaucht ist, was eine ziemlich solide Unterstützung über alle Browser hinweg bedeutet

Ich glaube nicht, dass das Animieren von Hintergrundfarbstopps oder einer Maskenposition besonders performant ist, aber da wir hier über „Bildschirmwipes“ sprechen, könnte man sich vorstellen, dass die Seite wahrscheinlich nicht mehr interagiert wird, bis der Seitenübergang abgeschlossen ist, also ist das vielleicht nicht das größte Problem der Welt.