スケルトンスクリーン効果を実現する CSS

ネットワークデータを読み込むときは、ユーザーエクスペリエンスを向上させるために、通常は円形の読み込みアニメーションが使用されるか、プレースホルダーとしてスケルトンスクリーンが使用されます。読み込みアニメーションと比較すると、スケルトンスクリーン効果はより鮮明で実装が簡単です。シンプルなスケルトンスクリーンは CSS を使用して実装できます。

アイデア

HTML スケルトン
CSSスタイル
CSS とアニメーション

骨組みを作ることから始めましょう

スケルトン構造は非常にシンプルで、好きなブロックレベルの要素をいくつか配置するだけです。

<div class='スクリーンルート'>
  <ul>
    <li/>
    <li/>
    <li/>
  </ul>
</div>

ほら、とても簡単なんです。

CSS カラーリング

よく見かけるスケルトンスクリーンはこんな感じです

説明を容易にし、コントラストを高めるために、まずゴーストバージョンを作成します

まず、CSSのlinear-gradientプロパティを使用して、赤に緑がかったグラデーション画像を描画し、それをliの背景塗りつぶしとして使用します。

ラベル

linear-gradient() は複数の色を使った線形グラデーション画像を作成できます。詳細については、こちらをご覧ください。

li{
    背景画像: 線形グラデーション(90度、#ff0000 25%、#41de6a 37%、#ff0000 63%);
    幅: 100%;
    高さ: 0.6rem;
    リストスタイル: なし;
}

実際に使用する場合は、グラデーション画像を通常の色に置き換えます。例: background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)

動かす

残っているのは、中央の緑色をアニメーション化するだけです

それを動かす方法を何か思いつきますか?

ここで使用されるのは、背景画像を引き伸ばし、背景配置のパーセンテージを動的に設定し、背景配置を変更し、コンテナに対する画像のさまざまなオフセット値を計算して、アニメーション効果を実現することです。

li{
    背景画像: 線形グラデーション(90度、#ff0000 25%、#41de6a 37%、#ff0000 63%);
    幅: 100%;
    高さ: 0.6rem;
    リストスタイル: なし;
    背景サイズ: 400% 100%;
    背景位置: 100% 50%;
    アニメーション: スケルトンのロード 1.4 秒、緩和時間無限;
}

@keyframes スケルトン読み込み {
  0% {
    背景位置: 100% 50%;
  }
  100% {
    背景位置: 0 50%;
  }
}

ここでは、 background-positionプロパティに 2 つの値が設定されています。最初の値はコンテナに対する水平オフセットを表し、2 番目の値はコンテナに対する垂直オフセットを表します。

パーセンテージを使用してbackground-position値を設定すると、実際の配置値を計算するための数式が実行されます(container width - image width) * (position x%) = (x offset value)に、設定されたパーセンテージ配置値が掛けられます。結果が実際のオフセット値です。background background-size幅を 400% に設定する目的の 1 つは、コンテナとの幅の差を作成することです。

学生の中には、 background-size値を 50% に設定すると、コンテナーとの幅に差が生じるのではないかと疑問に思う人もいるかもしれません。はい、しかしこの方法では背景画像がコンテナ全体にタイル表示され、緑の点が二重になることに驚かれるでしょう。

background-size にさまざまな値を設定してみて、その動作を観察し、なぜそうなるのか考えてみましょう。

最後に、キーフレームアニメーションを使用して、x座標のbackground-position値を100%から0%に設定します。

@keyframes スケルトン読み込み {
  0% {
    背景位置: 100% 50%;
  }
  100% {
    背景位置: 0 50%;
  }
}

コンテナの幅が100pxだとすると、背景画像の幅は400pxになります。上記の式を使用すると、アニメーションの最初のフレームでは、コンテナに対する背景画像のオフセットの実際の値は次のようになります。

(100px-400px)*100% = -300px

最後のフレームの実際のオフセット

(100px-400px)*0% = 0

アニメーションプロセスは、実際には、コンテナーの幅の 3 倍の線形背景イメージのプロセスであり、コンテナーに対するオフセットは-300pxから0に変化します。

要約する

CSS で Skeleton Screen を実装する方法についての記事はこれで終わりです。CSS で Skeleton Screen を実装する方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: ウェブページのフッターで注意すべきことのまとめ

>>: HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例