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

推薦する

Mysql systemctl start mysqld によって報告されるエラーの解決策

エラーメッセージ:制御プロセスがエラー コードで終了したため、mysqld.service のジョブ...

Vueはアップロードコンポーネントを実装します

目次1. はじめに2. アイデアファイルをアップロードする2つの方法3. ライフサイクル4. コード...

オンライン MYSQL 同期エラーのトラブルシューティング方法の概要 (必読)

序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...

Windows 10 に付属する仮想マシンのネットワークを設定するための詳細な手順 (グラフィック チュートリアル)

1. サーバー ホストをクリックし、右側の操作リストで [仮想スイッチ管理] をクリックして、仮想...

Nginx リバース プロキシと負荷分散の実践

リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...

JavaScript の onblur および onfocus イベントの詳細な説明

HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...

インスタンス化されたオブジェクトパラメータによるMySQLクエリ例の説明

この記事では、オブジェクト パラメータをインスタンス化して MySQL でデータをクエリする方法を紹...

DockerHubイメージリポジトリの使い方の詳しい説明

これまで使用していたイメージはすべて DockerHub パブリック リポジトリから取得していました...

階段効果を実現するためのWeChatアプレットカスタムメニューナビゲーション

設計意図ページを開発する際には、ページ上のナビゲーション メニューをクリックしたときにページを対応す...

FileZilla を使用して FTP サーバーに接続するプロセスの図

最初にサーバー上に FTP サーバーをセットアップし始めたとき、接続できないことがわかったので、Fi...

jQueryのコア機能とイベント処理の詳細な説明

目次イベントページの読み込みイベント委任イベントの切り替えイベント要約するイベントページの読み込み1...

JavaScriptの構文とコード構造に関する深い理解

目次概要機能性と読みやすさ空白括弧セミコロンインデント身元大文字と小文字を区別予約キーワード概要すべ...

1 分で Nginx のバージョンをスムーズにアップグレードおよびロールバックする方法

今日は、企業の実際の本番環境でよく遭遇する、Nginx を新しいバージョンにアップグレードし、古いバ...

JavaScript でプライベート変数を宣言する 2 つの方法

序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...

MySQL データ ウェアハウスを保護するための 5 つのヒント

さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...