Schachbrett-Enthüllung

Als ich 10 Jahre alt war, erinnere ich mich, wie mein Cousin unser Haus besuchte. Er war (und ist) ein cooler Typ, die Art, die sein selbst programmiertes Schachspiel auf einer Diskette mitbrachte. Und seine Version von Schach war genauso cool wie er, denn nach jedem Zug verschwand ein Teil des Spielfelds.

Noch cooler? Jedes verschwindende Stück des Spielfelds enthüllte ein ziemlich schickes Bild.

Ich dachte, die gleiche Art von Idee würde zu einer ziemlich schicken Benutzeroberfläche führen. Nur dass vielleicht anstatt einer Benutzerinteraktion, um den Hintergrund freizulegen, es einfach als Animation ablaufen könnte. Hier ist, wo ich gelandet bin

Die Idee ist ziemlich einfach und es gibt viele andere Möglichkeiten, dies zu tun, aber hier ist der Kaninchenbau, dem ich gefolgt bin...

Zuerst habe ich etwas Markup erstellt

Das Bild kann als Hintergrund in CSS für das <body>-Element oder ein bestimmtes <div>-Element behandelt werden. Also, keine Notwendigkeit, sich darum zu kümmern, solange.

Aber das Schachbrett ist interessant. Das ist ein Muster, bei dem CSS Grid perfekt passt. Also habe ich ein Element als Grid-Container mit vielen anderen <div>-Elementen direkt darin verwendet. Ich weiß nicht, wie viele Felder/Quadrate/was auch immer ein richtiges Schachbrett hat, also habe ich einfach die Zahl sieben aus der Luft gegriffen und sie quadriert, um insgesamt 49 Quadrate zu erhalten.

<div class="grid">
  <div></div>
  <!-- etc. -->
  <div></div>
</div>

Ja, das Aufschreiben all dieser divs ist mühsam und JavaScript könnte hier sicherlich helfen. Aber wenn ich nur experimentiere und nur den Komfort des Entwicklers brauche, dann kann Haml stattdessen helfen.

.grid
  - 49.times do
    %div

Am Ende kommt alles auf dasselbe heraus. So oder so hatte ich das gesamte Markup, das ich zum Stylen benötigte!

Den Hintergrundbild einstellen

Auch dies kann als background-image auf dem <body>-Element oder einem anderen Element erfolgen, je nachdem, wie es verwendet wird – solange es den gesamten Bereich abdeckt. Da ich sowieso einen Grid-Container benötigte, entschied ich mich, diesen zu verwenden.

.checkerboard {
  background-image: url('walrus.jpg');
  background-size: cover;
  /* Might need other properties to position the image just right */
}

Der Farbverlauf ist Teil der Rasterbilddatei, aber ich hätte auch mit einer Art Überlagerung auf dem <body> mittels eines Pseudo-Elements, wie :after, clever sein können. Sogar, das ist eine weit verbreitete Technik hier auf dem aktuellen Design von CSS-Tricks.

Das Grid stylen

Und ja, ich habe mich für CSS Grid entschieden. So ein 7x7 Grid zu erstellen ist ziemlich einfach.

.checkerboard {
  background-image: url('walrus.jpg');
  background-size: cover;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

Ich stelle mir vor, dass das viel besser sein wird, sobald wir aspect-ratio weit verbreitet sehen, zumindest wenn ich es richtig verstehe. Das Problem, das ich gerade habe, ist, dass das Grid nicht in irgendeiner Art von Proportion bleibt. Das bedeutet, dass die Felder des Schachbretts bei verschiedenen Viewport-Größen alle gequetscht werden. Bäh. Es gibt kleine Hacks, die wir in der Zwischenzeit tun können, wenn das super wichtig ist, aber ich habe beschlossen, es so zu lassen, wie es ist.

Die Felder stylen

Sie wechseln sich zwischen Weiß und einem dunklen Grauton ab, also

.checkerboard > div {
  background-color: #fff;
}
.checkerboard > div:nth-child(even) {
  background-color: #2f2f2f;
}

Ob Sie es glauben oder nicht, unser Markup und Styling sind fertig! Alles, was noch übrig ist, ist...

Die Felder animieren

Alles, was die Animation tun muss, ist, jedes Feld von opacity: 1; zu opacity: 0; zu überführen, und CSS-Animationen sind dafür perfekt.

@keyframes poof {
  to {
    opacity: 0;
  }
}

Großartig! Ich musste nicht einmal einen Start-Keyframe festlegen! Alles, was ich tun musste, war, die Animation für die Felder aufzurufen.

.checkerboard > div {
  animation-name: poof;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  background: #fff;
}

Ja, ich hätte hier die Shorthand-Eigenschaft animation verwenden können, aber ich finde es oft einfacher, ihre einzelnen Eigenschaften separat aufzubrechen, weil... nun ja, es gibt so verdammt viele davon und die Dinge werden auf einer einzigen Zeile schwer zu lesen und zu identifizieren.

Wenn Sie sich fragen, warum animation-fill-mode hier benötigt wird, liegt es daran, dass es verhindert, dass die Animation beim Setzen auf forwards zum Anfang der Animation zurückkehrt. Mit anderen Worten, jedes Feld bleibt bei opacity: 0;, wenn die Animation abgeschlossen ist, anstatt wieder sichtbar zu werden.

Ich wollte wirklich, wirklich etwas Schlaues und Cleveres tun, um die animation-delay der Felder zu staffeln, aber ich bin auf eine Menge Mauern gestoßen und habe schließlich beschlossen, meine Bemühungen, 100% Vanilla CSS zu verwenden, aufzugeben und stattdessen etwas leichtes SCSS zu verwenden. So konnte ich durch alle Felder schleifen und die Animation für jedes einzelne mit einer ziemlich Standardfunktion verzögern. Also, Entschuldigung für den abrupte Wechsel! Das war nur ein Teil der Reise.

$columns: 7;
$rows: 7;
$cells: $columns * $rows;

@for $i from 1 through $cells {
  .checkerboard > div:nth-child(#{$i}) {
    animation-delay: (random($cells) / $columns) + s;
  }
}

Zerlegen wir das mal

Es gibt Variablen für die Anzahl der Grid-Spalten ($columns), Grid-Zeilen ($rows) und die Gesamtzahl der Zellen ($cells). Letzteres ist das Produkt der Multiplikation der ersten beiden. Wenn wir wissen, dass wir immer mit einem Grid arbeiten, das ein perfektes Quadrat ist, dann könnten wir das etwas umgestalten, um die Anzahl der Zellen mit Exponenten zu berechnen.
Dann erhält für jede Instanz von Zellen zwischen 1 und der Gesamtzahl von $cells (was in diesem Fall 49 ist), jedes einzelne Feld eine animation-delay basierend auf seinem :nth-child()-Wert. Das erste Feld ist also div:nth-child(1), dann div:nth-child(2) und so weiter. Schauen Sie sich das kompilierte CSS in der Demo an, und Sie werden sehen, wie sich alles aufschlüsselt.

.checkerboard > div:nth-child(1) {}
.checkerboard > div:nth-child(2) {}
/* etc. */

Schließlich ist die animation-delay eine Berechnung, die eine zufällige Zahl zwischen 1 und der Gesamtzahl von $cells nimmt, dividiert durch die Anzahl von $columns, und Sekunden an den Wert angehängt. Ist das der beste Weg, das zu tun? Keine Ahnung. Es kommt darauf an, ein bisschen mit den Dingen zu spielen und etwas zu finden, das sich für Sie "richtig" anfühlt. Das fühlte sich für mich "richtig" an.

Ich wollte wirklich, wirklich kreativ werden und CSS Custom Properties verwenden, anstatt auf SCSS zurückzugreifen. Ich mag es, dass benutzerdefinierte Eigenschaften und Werte clientseitig aktualisiert werden können, im Gegensatz zu SCSS, wo die berechneten Werte beim Build kompiliert werden und so bleiben. Auch hier ist das genau der Punkt, an dem ich versucht wäre, JavaScript zu verwenden. Aber, ich habe mein Bett gemacht und muss darin liegen.

Wenn Sie sich zuvor das kompilierte CSS angesehen haben, dann hätten Sie die berechneten Werte gesehen

/* Yes, Autoprefixer is in there... */
.checkerboard > div:nth-child(1) {
  -webkit-animation-delay: 4.5714285714s;
          animation-delay: 4.5714285714s;
}

.checkerboard > div:nth-child(2) {
  -webkit-animation-delay: 5.2857142857s;
          animation-delay: 5.2857142857s;
}

.checkerboard > div:nth-child(3) {
  -webkit-animation-delay: 2.7142857143s;
          animation-delay: 2.7142857143s;
}

.checkerboard > div:nth-child(4) {
  -webkit-animation-delay: 1.5714285714s;
          animation-delay: 1.5714285714s;
}

Hm, vielleicht sollte diese Animation optional sein...

Manche Leute sind empfindlich gegenüber Bewegung, daher ist es wahrscheinlich eine gute Idee, die Dinge so zu ändern, dass die Felder nur dann gestylt und animiert werden, wenn – und nur wenn – ein Benutzer es bevorzugt. Wir haben eine Media Query dafür!

@media screen and (prefers-reduced-motion: no-preference) {
  .checkerboard > div {
    animation-name: poof;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
    background: #fff;
  }
  .checkerboard > div:nth-child(even) {
    background: #2f2f2f;
  }
}

Da haben Sie es!

Hier ist die Demo noch einmal