チェッカーボードの公開

私は10歳のとき、いとこが私の家を訪れに来たことを今でも覚えています。彼は（まだ）クールな子供であり、彼が自分自身をプログラムしたチェスゲームディスクを運ぶような子供です。彼のチェスのバージョンは、彼自身と同じくらいクールです。なぜなら、ボードの一部はすべてのステップの後に消えるからです。

もっとクールなものは何ですか？ボード上で消えるすべてのピースは、非常に美しい写真を示しています。

同じアイデアが本当にクールなユーザーインターフェイスを作ることができると思います。背景を表示するためにユーザーインタラクションが必要ではないだけでなく、単にアニメーションとして再生できます。これが私の最終結果です：

このアイデアはシンプルで、それを達成する他の多くの方法がありますが、これは私が従ったアイデアです...

最初に、いくつかのタグを作成しました

画像は、 body要素のCSSの背景として処理できます。<div>要素に。したがって、この問題は当面は必要ありません。しかし、ボードは楽しいです。これは、CSSグリッドという単語が書かれたパターンであるため、他の多くのものを含むグリッドコンテナとして要素を使用しました。<code><div>要素。合法的なチェス委員会のために何の正方形/正方形/何があるのか​​わからないので、私は薄い空気から7番を選んだだけで、それを二乗して49平方にしました。<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">ログイン後にコピー</div></div> <p>はい、これをすべて書いてください<code><div>要素は苦痛であり、JavaScriptは確かに役立ちます。しかし、私がただ実験していて、開発者の利便性が必要な場合、Hamlを使用することは役立ちます。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 。グリッド -49.タイムズはそうします ％div</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>最終結果は同じです。いずれにせよ、これは私にスタイリングデザインを始めるために必要なすべてのマーキングを与えてくれました！</p> <h2 id="背景画像を設定します">背景画像を設定します</h2> <p>繰り返しますが、これは、スペース全体を覆う限り、使用方法に応じて、 <code>bodyまたは他の要素のbackground-imageとして発生する可能性があります。とにかくグリッドコンテナが必要なので、使用することにしました。

 .checkerboard {
  背景イメージ：url（ 'walrus.jpg'）;
  バックグラウンドサイズ：カバー;
  /*画像を正しく見つけるには、他のプロパティが必要になる場合があります*/
}

グラデーションはラスター画像ファイルの一部ですが、 :afterな擬似エレメントを使用して、 body要素のある種のオーバーレイで巧みに処理できます。残念ながら、これはまさにCSS-Tricksによって設計された一般的な技術です。

スタイルグリッド

はい、CSSグリッドを使用しました。 7×7グリッドを作るのはとても簡単です。

 .checkerboard {
  背景イメージ：url（ 'walrus.jpg'）;
  バックグラウンドサイズ：カバー;
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（7、1Fr）;
  グリッドテンプレート列：繰り返し（7、1fr）;
}

少なくとも正しく理解していれば、 aspect-ratioが広くサポートされていることがわかると、はるかに良くなると思います。私の問題は、グリッドが割合を維持していないことです。これは、チェスボードブロックがさまざまなビューポートサイズで非常に絞られることを意味します。良くない。これが非常に重要な場合は、この期間中にいくつかの小さなトリックを行うことができますが、そのまま保持することにしました。

スタイルの正方形

彼らは白と濃い灰色を交互にしているので、：

 .checkerboard> div {
  バックグラウンドカラー：#fff;
}
.checkerboard> div：nth-​​child（vev）{
  バックグラウンドカラー：＃2F2F2F;
}

信じられないかもしれませんが、私たちのマークとスタイルは完了です！残りは...

アニメーション正方形

アニメーションが行う必要があるのは、各正方形をopacity: 1; opacity: 0; 、そしてCSSアニメーションはこれに最適です。

 @KeyFrames POOF {
  に {
    不透明：0;
  }
}

素晴らしい！開始キーフレームを設定する必要さえありません！私がしなければならないのは、広場のアニメーションを呼ぶことだけです。

 .checkerboard> div {
  アニメーション名：POOF;
  アニメーション期間：0.25秒;
  Animation-Fill-Mode：フォワード;
  背景：#ffff;
}

はい、ここでアニメーションの略語プロパティを使用できたかもしれませんが、その構成プロパティを別々に分離する方が簡単であることがよくあります...

ここでanimation-fill-modeが必要な理由を疑問に思っている場合、それはアニメーションがforwardsに設定されたときにアニメーションの先頭に戻るのを防ぐためです。言い換えれば、アニメーションが終わったとき、各正方形はopacity: 0;再び現れる代わりに。

私は本当に賢いことをして、ブロックのanimation-delayをインターレイブしたかったのですが、いくつかの障害に遭遇し、最終的に100％ネイティブCSSを使用して軽量のSCSに切り替える努力をあきらめることにしました。このようにして、すべての正方形を繰り返し、かなり標準関数を使用して、各正方形の部分的にシフトしたものを描画できます。だから、突然切り替えてすみません！それは旅のほんの一部です。

 $列：7;
$ rows：7;
$セル：$列 * $ rows;

@$ $ iから1〜 $セル{
  .checkerboard> div：nth-​​child（＃{$ i}）{
    Animation-Delay ：（ランダム（$セル） / $列）s;
  }
}

それを分解しましょう：

• グリッド列の数​​（ $columns ）、グリッド行の数（ $rows ）、およびセルの総数（ $cells ）を備えた変数。最後の1つは、最初の2つの増殖の産物です。私たちが常に完璧な四角いグリッドで作業していることがわかっている場合は、指数を使用してセルの数を計算して、リファクタリングを行うことができます。
• 次に、各セル$cells合計（この場合は49）の間で、個々の正方形は:nth-child()に基づいてanimation-delayを取得します。したがって、最初の正方形はdiv:nth-child(1) 、 div:nth-child(2)などです。デモでコンパイルされたCSSをチェックすると、それがどのように拡大するかがわかります。

 / *はい、autoprefixerがそこにあります... */
.checkerboard> div：nth-​​child（1）{}
.checkerboard> div：nth-​​child（2）{}
/ *など */

• 最後に、 animation-delay 1から$cellsの総数の間の乱数を取る計算であり、 $columns数で除算し、値の後に数秒を追加します。これは最良の方法ですか？わからない。それは何かで遊んで、あなたに「正しい」と感じる何かを見つけることになります。これは私に「正しい」と感じています。

SCSSに頼る代わりに、CSSで創造的なプロパティをカスタマイズし、カスタマイズしたいと思っています。 SCSで計算された値がコンパイルされ、ビルド時に変更されていないまま、カスタムプロパティと値をクライアント側で更新できることが気に入っています。繰り返しますが、これはまさに私が本当にJavaScriptに切り替えたい場所です。しかし、私はすでにベッドを準備していて、その上で眠ることしかできませんでした。

コンパイルされたCSSを以前に見た場合、計算された値が表示されます。

 .checkerboard> div：nth-​​child（1）{
  アニメーション遅延：4.5714285714S;
}

.checkerboard> div：nth-​​child（2）{
  Animation-Delay：5.2857142857S;
}

.checkerboard> div：nth-​​child（3）{
  アニメーション遅延：2.7142857143S;
}

.checkerboard> div：nth-​​child（4）{
  アニメーション遅延：1.5714285714S;
}

まあ、多分アニメーションはオプションでなければなりません...

一部の人々は動きや動きに敏感であるため、ユーザーが気に入った場合にのみ正方形のスタイリングとアニメーションが設定されるように、設定を変更するのが最善です。これを達成するためのメディアクエリがあります！

 @media画面と（還元モーションを好む：no-preference）{
  .checkerboard> div {
    アニメーション名：POOF;
    アニメーション期間：0.25秒;
    Animation-Fill-Mode：フォワード;
    背景：#ffff;
  }
  .checkerboard> div：nth-​​child（vev）{
    背景：＃2F2F2F;
  }
}

それだけです！