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

スケルトンスクリーン効果を実現する 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 スクリプトを動的に読み込みます。例

推薦する

高性能なウェブサイトのための14のテクニック

オリジナル: http://developer.yahoo.com/performance/rule...

MySQL の自動増分 ID に関するいくつかの小さな問題の要約

以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...

CocosCreatorでリストを作成する方法

CocosCreator バージョン: 2.3.4 Cocos には List コンポーネントがない...

Docker 経由で Redis 6.x クラスターをデプロイする方法

システム環境: Redis バージョン: 6.0.8 Docker バージョン: 19.03.12シ...

Linux のスケジュールタスク Crontab コマンドの使用に関する詳細な説明と概要

crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...

WeChatアプレットで数字当てゲームを実装する実際のプロセス

目次機能紹介レンダリング1. ホームページレンダリング用のコード(index03) 2. ゲーム開始...

インターフェーステストプラットフォームを構築するためのDjango+Vue+Dockerの詳細な説明

1. 冒頭の2つの単語みなさんこんにちは。私の名前はLin Zonglinです。私はテストエンジニア...

Vueカスタムカプセル化ボタンコンポーネント

Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...

CSS3に基づいてiPhoneを描く

結果:実装コードhtml <div class='iphone'> &l...

Webデザインチュートリアル(3):デザインの手順と考え方

<br />前のチュートリアル:Webデザインチュートリアル(2):模倣と盗作について。...

after疑似要素を使用して中空の三角矢印とXアイコンを実装する例

フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...

Vue における ref と $refs の紹介と使用例

序文JavaScript では、document.querySelector("#demo...

LeetCode の SQL 実装 (182. 重複するメールボックス)

[LeetCode] 182.重複メールPerson という名前のテーブル内のすべての重複メールを...

MySQL で特定の親行のすべての子行を見つけるソリューション

序文注: テストデータベースのバージョンはMySQL 8.0ですテーブルを作成し、ユーザー scot...

MySQLデータクエリが多すぎるとOOMが発生するかどうかについての簡単な議論

目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...