Schachbrett enthüllen

Ich erinnere mich noch, als ich zehn Jahre alt war, mein Cousin kam zu meinem Haus. Er ist (immer noch) ein cooles Kind, die Art von Kind, die eine Schachspielscheibe tragen wird, die er selbst programmiert hat. Seine Version des Schaches ist so cool wie er selbst, weil ein Teil des Bretts nach jedem Schritt verschwindet.

Was ist cooler? Jedes Stück, das auf dem Brett verschwindet, zeigt ein sehr schönes Bild.

Ich denke, die gleiche Idee kann einige wirklich coole Benutzeroberflächen machen. Es ist nur so, dass möglicherweise keine Benutzerinteraktion erforderlich ist, um den Hintergrund anzuzeigen, sondern einfach als Animation gespielt werden. Dies ist mein Endergebnis:

Diese Idee ist einfach und es gibt viele andere Möglichkeiten, sie zu erreichen, aber das ist die Idee, die mir gefolgt ist ...

Zuerst habe ich einige Tags erstellt

Bilder können als Hintergrund in CSS auf body verarbeitet werden oder von einer bestimmten Größe entwickelt werden<div> auf dem Element. Daher ist dieses Problem vorerst nicht erforderlich. Aber das Board macht Spaß. Dies ist ein Muster mit den Wörtern, die CSS -Gitter darauf geschrieben haben, daher habe ich ein Element als Gitterbehälter mit vielen anderen im Inneren verwendet<code><div> Element. Ich weiß nicht, wie viele Quadrate/Quadrate/was auch immer für ein legales Schachbrett ist, also habe ich nur die Nummer 7 aus der Luft ausgewählt und dann 49 Quadrate erzielt.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Ja, schreiben Sie all dies<code><div> Elemente sind schmerzhaft und JavaScript kann sicherlich helfen. Aber wenn ich nur experimentiere und nur die Bequemlichkeit des Entwicklers brauche, kann es helfen, HAML zu verwenden:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> .Netz - 49.Times tun %div</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Das Endergebnis ist das gleiche. In jedem Fall gab ich alle Markierungen, die ich brauchte, um ein Styling -Design zu beginnen!</p> <h2 id="Hintergrundbild-setzen"> Hintergrundbild setzen</h2> <p> Auch dies kann als <code>background-image auf body oder einem anderen Element passieren, je nachdem, wie es verwendet wird - solange es den gesamten Raum bedeckt. Da ich sowieso einen Gitterbehälter brauche, habe ich mich entschlossen, ihn zu verwenden.

 .Checkerboard {
  Hintergrundbild: URL ('walrus.jpg');
  Hintergrundgröße: Cover;
  /* Andere Eigenschaften können erforderlich sein, um das Bild korrekt zu lokalisieren*/
}

Gradienten sind Teil der Raster-Bilddatei, aber ich kann sie mit einer Art Überlagerung auf body mit Pseudoelementen wie :after verarbeiten, z. Leider ist dies genau die gemeinsame Technologie, die derzeit von CSS-Tricks entworfen wurde.

Stilraster

Ja, ich habe CSS -Netz verwendet. Es ist sehr einfach, ein 7 × 7 -Gitter zu erstellen.

 .Checkerboard {
  Hintergrundbild: URL ('walrus.jpg');
  Hintergrundgröße: Cover;
  Anzeige: Grid;
  Grid-Template-Säulen: Wiederholung (7, 1fr);
  Grid-Template-Reihen: Wiederholung (7, 1fr);
}

Ich denke, es wird viel besser sein, wenn wir sehen aspect-ratio weit verbreitet ist, zumindest wenn ich es richtig verstehe. Mein Problem ist nun, dass das Netz keine Proportionen beibehält. Dies bedeutet, dass die Schachbrettblöcke bei verschiedenen Ansichtsfenster sehr gepresst werden. Nicht gut. Wenn dies sehr wichtig ist, können wir in dieser Zeit einige kleine Tricks machen, aber ich habe beschlossen, es so zu halten, wie es ist.

Stilquadrate

Sie wechseln zwischen Weiß und Dunkelgrau, also:

 .Checkerboard> div {
  Hintergrundfarbe: #fff;
}
.Checkerboard> div: n-Kind (sogar) {
  Hintergrundfarbe: #2f2f2f;
}

Ob Sie es glauben oder nicht, unsere Marken und Stile sind fertig! Der Rest ist ...

Animationsquadrate

Alles, was die Animationen tun müssen, ist, jedes Quadrat aus opacity: 1; zur opacity: 0; und die CSS -Animation ist dafür perfekt.

 @keyframes poof {
  Zu {
    Deckkraft: 0;
  }
}

wunderbar! Ich muss den Start -Keyframe nicht einmal festlegen! Ich muss nur die Animation auf dem Platz anrufen.

 .Checkerboard> div {
  Animationsname: Poof;
  Animationsdauer: 0,25s;
  Animations-Fill-Mode: Forwards;
  Hintergrund: #ffff;
}

Ja, ich hätte hier Animations -Abkürzungseigenschaften verwenden können, aber ich finde es oft einfacher, seine konstituierenden Eigenschaften getrennt zu trennen, weil ... nun, sie sind zu viele und es ist schwer zu lesen und in einer einzigen Zeile zu erkennen.

Wenn Sie sich fragen, warum hier animation-fill-mode benötigt wird, liegt dies daran, dass die Animation beim Einstellen auf den Animation zum Beginn der forwards zurückschleudert. Mit anderen Worten, wenn die Animation vorbei ist, bleibt jedes Quadrat opacity: 0; anstatt wieder aufzutauchen.

Ich wollte unbedingt etwas Kluges tun, um animation-delay der Blöcke zu verstärken, aber ich stieß auf einige Hindernisse und beschloss schließlich, meine Bemühungen um 100% native CSS zu verwenden und auf einige leichte SCSS zu wechseln. Auf diese Weise kann ich alle Quadrate durchsetzen und eine ziemlich Standardfunktion verwenden, um die teilweise verschobene für jedes Quadrat zu zeichnen. Tut mir leid, dass ich plötzlich gewechselt habe! Das ist nur ein Teil der Reise.

 $ Spalten: 7;
$ Zeilen: 7;
$ cells: $ columns * $ Zeilen;

@Für $ i von 1 bis $ cells {
  .Checkerboard> div: nth-child (#{$ i}) {
    Animation-Delay: (Random ($ cell) / $ columns) s;
  }
}

Lassen Sie es uns aufschlüsseln:

• Variablen mit der Anzahl der Gittersäulen ( $columns ), der Anzahl der Gitterreihen ( $rows ) und der Gesamtzahl der Zellen ( $cells ). Der letzte ist das Produkt der ersten beiden, multipliziert miteinander. Wenn wir wissen, dass wir immer in einem perfekten Quadratraster arbeiten, können wir es mit einem Exponenten umsetzen, um die Anzahl der Zellen zu berechnen.
• Dann erhält jedes einzelne Quadrat für jede Zellinstanz zwischen 1 und $cells insgesamt (49 in diesem Fall) ein animation-delay basierend auf seinem Wert :nth-child() . Das erste Quadrat ist also div:nth-child(1) , dann div:nth-child(2) und so weiter. Schauen Sie sich die kompilierten CSS in der Demo an und Sie werden sehen, wie es alle erweitert.

 / * Ja, Autoprefixer ist da drin ... */
.Checkerboard> div: n-Kind (1) {}
.Checkerboard> div: n-Kind (2) {}
/* usw. */

• Schließlich ist animation-delay eine Berechnung, die eine zufällige Zahl zwischen 1 und die Gesamtzahl der $cells erfordert, die Anzahl der $columns unterteilt und die Sekunden nach dem Wert angehängt. Ist das der beste Weg? Ich habe keine Ahnung. Es kommt darauf an, mit etwas herumzuspielen und etwas zu finden, das sich für Sie „richtig“ anfühlt. Das fühlt sich für mich "richtig" an.

Ich möchte wirklich kreative und passen Eigenschaften mit CSS anstelle von SCSS an. Ich mag es, dass benutzerdefinierte Eigenschaften und Werte auf der Clientseite aktualisiert werden können, während die in SCSS berechneten Werte kompiliert und zum Zeitpunkt der Erstellung unverändert bleiben. Genau hier möchte ich wirklich zu JavaScript wechseln. Ich hatte jedoch bereits das Bett vorbereitet und konnte nur darauf schlafen.

Wenn Sie sich das kompilierte CSS früher angesehen haben, sehen Sie den berechneten Wert:

 .Checkerboard> div: n-Kind (1) {
  Animation-Delay: 4.5714285714s;
}

.Checkerboard> div: n-Kind (2) {
  Animation-Delay: 5.2857142857s;
}

.Checkerboard> div: n-Kind (3) {
  Animation-Delay: 2.7142857143s;
}

.Checkerboard> div: n-Kind (4) {
  Animation-Delay: 1.5714285714s;
}

Vielleicht sollte die Animation optional sein ...

Einige Menschen sind empfindlich gegenüber Bewegung und Bewegung, daher ist es am besten, die Einstellungen so zu ändern, dass das Styling und die Animation der Quadrate nur dann festgelegt werden, wenn der Benutzer es mag. Wir haben eine Medienanfrage, um dies zu erreichen!

 @media Screen und (bevorzugt es, reduzierte Motion: No-Preference) {
  .Checkerboard> div {
    Animationsname: Poof;
    Animationsdauer: 0,25s;
    Animations-Fill-Mode: Forwards;
    Hintergrund: #ffff;
  }
  .Checkerboard> div: n-Kind (sogar) {
    Hintergrund: #2f2f2f;
  }
}

Das ist alles!