En damier révéler

Je me souviens encore quand j'avais dix ans, mon cousin est venu visiter ma maison. Il est (toujours) un enfant cool, le genre d'enfant qui portera un disque de jeu d'échecs qu'il a programmé. Sa version d'échecs est aussi cool que lui-même, car une partie du conseil d'administration disparaît après chaque étape.

Quoi de plus cool? Chaque pièce qui disparaît sur la planche montrera une très belle image.

Je pense que la même idée peut faire des interfaces utilisateur vraiment cool. C'est juste qu'aucune interaction utilisateur n'est nécessaire pour afficher l'arrière-plan, il peut être joué simplement comme une animation. Ceci est mon résultat final:

Cette idée est simple, et il existe de nombreuses autres façons d'y parvenir, mais c'est l'idée que j'ai suivie ...

Tout d'abord, j'ai créé des balises

Les images peuvent être body comme arrière<div> sur l'élément. Par conséquent, ce problème n'est pas nécessaire pour le moment. Mais le conseil d'administration est amusant. Ceci est un modèle avec la grille CSS des mots écrite dessus, j'ai donc utilisé un élément comme un récipient de grille avec beaucoup d'autres à l'intérieur<code><div> élément. Je ne sais pas combien de carrés / carrés / tout ce qu'il y a pour une planche d'échecs légale, alors j'ai juste choisi le numéro 7 de l'air mince, puis je l'ai carré pour obtenir 49 carrés.<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">Copier après la connexion</div></div> <p>Oui, écrivez tout ça<code><div> Les éléments sont douloureux et JavaScript peut certainement aider. Mais si j'expérimente et que je dois juste avoir besoin de la commodité du développeur, utiliser HAML peut aider:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> .grille - 49. % div</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Le résultat final est le même. Quoi qu'il en soit, cela m'a donné toutes les marques dont j'avais besoin pour démarrer un design coiffant!</p> <h2 id="Définir-l-image-d-arrière-plan"> Définir l'image d'arrière-plan</h2> <p> Encore une fois, cela peut se produire en tant <code>background-image sur body ou un autre élément, selon la façon dont il est utilisé - tant qu'il couvre tout l'espace. Comme j'ai besoin d'un conteneur de grille de toute façon, j'ai décidé de l'utiliser.

 .Checkerboard {
  Image de fond: URL ('walrus.jpg');
  taille arrière: couverture;
  / * D'autres propriétés peuvent être nécessaires pour localiser correctement l'image * /
}

Les gradients font partie du fichier d'image raster, mais je peux le gérer habilement avec une sorte de superposition sur body , en utilisant des pseudo-éléments, tels que :after . Hélas, c'est exactement la technologie commune actuellement conçue par CSS-Tricks.

Grille de style

Oui, j'ai utilisé la grille CSS. Faire une grille 7 × 7 est très facile.

 .Checkerboard {
  Image de fond: URL ('walrus.jpg');
  taille arrière: couverture;
  Affichage: grille;
  Grid-Template-colonnes: répéter (7, 1FR);
  Grid-Template Rows: Repeat (7, 1FR);
}

Je pense que ce sera beaucoup mieux une fois que nous verrons que aspect-ratio est largement pris en charge, du moins si je le comprends correctement. Mon problème est maintenant que la grille ne maintient aucune proportion. Cela signifie que les blocs d'échecs deviendront très pressés à différentes tailles de fenêtre. pas bon. Si cela est très important, nous pouvons faire quelques petites astuces au cours de cette période, mais j'ai décidé de le garder tel quel.

Carrés de style

Ils alternent entre blanc et gris foncé, donc:

 .Checkerboard> div {
  Color d'arrière-plan: #FFF;
}
.Checkerboard> Div: Nth-Child (même) {
  Color d'arrière-plan: # 2F2F2F;
}

Croyez-le ou non, nos marques et nos styles sont terminés! Le reste est ...

Carrés d'animation

Tout ce que les animations doivent faire est de convertir chaque carré de opacity: 1; à opacity: 0; , et l'animation CSS est parfaite pour cela.

 @keyframes poof {
  à {
    Opacité: 0;
  }
}

merveilleux! Je n'ai même pas besoin de définir l'image clé de démarrage! Tout ce que j'ai à faire est d'appeler l'animation sur le carré.

 .Checkerboard> div {
  nom d'animation: Poof;
  Durée d'animation: 0,25S;
  Animation-Filt-mode: Forwards;
  Contexte: #FFFF;
}

Oui, j'aurais pu utiliser des propriétés d'abréviation d'animation ici, mais je trouve souvent plus facile de séparer ses propriétés constituantes séparément parce que ... eh bien, ils sont trop nombreux et il est difficile de lire et de reconnaître en une seule ligne.

Si vous vous demandez pourquoi animation-fill-mode est nécessaire ici, c'est parce qu'il empêche l'animation de revenir au début de l'animation lorsqu'il est mis à forwards . En d'autres termes, lorsque l'animation est terminée, chaque carré restera opacity: 0; au lieu de réapparaître.

Je voulais vraiment faire quelque chose d'intelligent pour entrelacer animation-delay des blocs, mais j'ai rencontré des obstacles et j'ai finalement décidé de renoncer à mes efforts pour utiliser des CSS 100% indigènes et passer à des SCS légers. De cette façon, je peux parcourir tous les carrés et utiliser une fonction assez standard pour dessiner le partie partiellement décalé pour chaque carré. Alors, désolé d'avoir changé soudainement! Cela fait partie du voyage.

 $ colonnes: 7;
$ lignes: 7;
$ cellules: $ colonnes * $ rangées;

@for $ i de 1 à $ Celles {
  .Checkerboard> div: nth-child (# {$ i}) {
    Animation-retard: (aléatoire ($ cellules) / $ colonnes) s;
  }
}

Décomposons-le:

• Variables avec le nombre de colonnes de grille ( $columns ), le nombre de lignes de grille ( $rows ) et le nombre total de cellules ( $cells ). Le dernier est le produit des deux premiers multipliés ensemble. Si nous savons que nous travaillons toujours dans une grille carrée parfaite, nous pouvons le refactoriser, en utilisant un exposant pour calculer le nombre de cellules.
• Ensuite, pour chaque instance de cellule entre 1 et $cells totales (49 dans ce cas), chaque carré individuel obtiendra un animation-delay basé sur sa valeur :nth-child() . Ainsi, le premier carré est div:nth-child(1) , alors div:nth-child(2) , et ainsi de suite. Découvrez le CSS compilé dans la démo et vous verrez comment il se développe tout.

 / * Oui, AutoPrefixer est là-dedans ... * /
.Checkerboard> Div: Nth-Child (1) {}
.Checkerboard> Div: Nth-Child (2) {}
/* etc. */

• Enfin, animation-delay est un calcul qui prend un nombre aléatoire entre 1 et le nombre total de $cells , divise par le nombre de $columns , et ajoute les secondes après la valeur. Est-ce la meilleure façon? Je ne sais pas. Cela revient à jouer avec quelque chose et à trouver quelque chose qui vous semble «bien» pour vous. Cela me semble "bien" pour moi.

Je veux vraiment faire preuve de créativité et personnaliser les propriétés avec CSS au lieu de recourir à SCSS. J'aime que les propriétés et les valeurs personnalisées puissent être mises à jour du côté client, tandis que les valeurs calculées dans SCSS sont compilées et laissées inchangées au moment de la construction. Encore une fois, c'est exactement là que je veux vraiment passer à JavaScript. Cependant, j'avais déjà préparé le lit et que je ne pouvais dormir dessus.

Si vous avez regardé le CSS compilé plus tôt, vous verrez la valeur calculée:

 .Checkerboard> Div: Nth-Child (1) {
  Animation-retard: 4.5714285714S;
}

.Checkerboard> Div: Nth-Child (2) {
  Animation-retard: 5.2857142857S;
}

.Checkerboard> Div: Nth-Child (3) {
  Animation-retard: 2.7142857143S;
}

.Checkerboard> Div: Nth-Child (4) {
  Animation-retard: 1.5714285714S;
}

Eh bien, peut-être que l'animation devrait être facultative ...

Certaines personnes sont sensibles au mouvement et au mouvement, il est donc préférable de modifier les paramètres afin que le style et l'animation des carrés ne soient définis que si l'utilisateur l'aime. Nous avons une question médiatique pour y parvenir!

 Écran @Media et (préfère le mouvement réduit: sans préférence) {
  .Checkerboard> div {
    nom d'animation: Poof;
    Durée d'animation: 0,25S;
    Animation-Filt-mode: Forwards;
    Contexte: #FFFF;
  }
  .Checkerboard> Div: Nth-Child (même) {
    Contexte: # 2F2F2F;
  }
}

C'est tout!