CSS読み込みテキストアニメーションでユーザーエクスペリエンスを向上

Web サイトに遅れが生じると、ユーザーは不満を感じ、離れてしまう可能性があります。適切に設計された CSS 読み込みテキストアニメーションにより、ユーザーの関心を引きつけ、ブランドを強化し、アイドルな時間をポジティブなエクスペリエンスに変えます。

このガイドでは、プレーンな HTML と CSS を使用して洗練された読み込みアニメーションを構築する方法を説明します。ビジュアルエディターをお好みの場合は、Filmora の代替手段についても説明します。

さあ、飛び込んでみましょう！

1.読み込み中のテキストアニメーションとは何ですか?

読み込み中のテキストアニメーションでは、コンテンツの読み込み中にスタイルや動きが変化する単語 (多くの場合「読み込み中」または「お待ちください」) が表示されます。リクエストが進行中であることをユーザーに知らせ、体感的な待ち時間を短縮します。

仕組みは?

読み込みアニメーションの中核は、次の 3 つのレイヤーに依存します。 <オル>

HTML はテキスト要素を提供します。

CSS は、@keyframes を使用して視覚的な変更 (色、動き、不透明度) を指示します。および遷移プロパティ。

JavaScript では、ページがアイドル状態のときに一時停止するなど、より複雑なインタラクションを追加できます。

2. CSS がアニメーションの読み込みに最適な理由

CSS は軽量で、クロスブラウザーであり、完全にクライアント側です。サーバーへの負荷や追加のスクリプトは必要ありません。これにより、開発者はメンテナンスが容易で、その場でカスタマイズできるアニメーションを作成できます。

アニメーションの作成

以下は実際的な例です。回転する円と連続したフェードインテキストの組み合わせです。

HTML 構造

<div class='loading-container'>
  <div class='loading-circle'></div>
  <div class='loading-text'>
    <span>L</span><span>o</span><span>a</span><span>d</span><span>i</span><span>n</span><span>g</span><span>.</span><span>.</span><span>.</span>
  </div>
</div>

CSS スタイル

body{font-family:'Nunito Sans',sans-serif;background:#f0f0f0;display:flex;justify-content:center;align-items:center;height:100vh;margin:0}
.loading-container{display:flex;align-items:center}
.loading-circle{width:50px;height:50px;border-radius:50%;border:5px solid #ccc;border-top-color:#9b59b6;animation:spin 1s linear infinite;margin-right:20px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:36px;color:#9b59b6}
.loading-text span{opacity:0;transform:translateY(20px);animation:fadeInUp 1s ease-in-out forwards}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
.loading-text span:nth-child(1){animation-delay:.2s}
.loading-text span:nth-child(2){animation-delay:.4s}
.loading-text span:nth-child(3){animation-delay:.6s}
.loading-text span:nth-child(4){animation-delay:.8s}
.loading-text span:nth-child(5){animation-delay:1s}
.loading-text span:nth-child(6){animation-delay:1.2s}
.loading-text span:nth-child(7){animation-delay:1.4s}
.loading-text span:nth-child(8){animation-delay:1.6s}
.loading-text span:nth-child(9){animation-delay:1.8s}
.loading-text span:nth-child(10){animation-delay:2s}

アニメーションのカスタマイズ

テキスト: <span> を編集します内容を希望のメッセージに変更します。
色: background を更新します、border-top-color 、color
フォント: Google Font URLを交換し、font-familyを調整します。 .
速度と遅延: animation を変更します円の継続時間と animation-delay span ごとに .

テキストアニメーションのための高度な CSS テクニック

以下を使用してプリローダーを昇格させます。

<オル>

基本的なフェード、スライド、バウンス

2D トランジションにより見た目がすっきりします。

奥行きのための 3D 変換。

テキストと図形を組み合わせたモーショングラフィックス

手作り感を演出するストップモーション効果

3. Filmora:視覚的な代替手段

Filmora は、事前に構築された読み込みテキストテンプレートのライブラリを提供しており、デザイナーはコーディングなしで洗練されたアニメーションを作成できます。これは、開発者以外の場合、またはビデオ中心のアニメーションが必要な場合に特に役立ちます。

主な機能

広範なアニメーションライブラリ:フェードイン、タイプライター、バウンスなど
カスタムフォントとカラーパレット。
アニメーションパスとモーションパス。
同期効果のためのオーディオ主導のテキスト。

Filmora 対 CSS

Web ページ上で軽量で完全に応答性の高いテキストが必要な場合は、CSS を使用します。よりリッチなビデオアニメーションを使用したい場合、またはテンプレートベースのソリューションを迅速に使用したい場合は、Filmora を選択してください。

Filmora で読み込みテキストアニメーションを作成する方法

<オル>

Filmora をインストールして開きます。

タイトルライブラリで「loading」を検索します。

テンプレートを選択し、タイムラインにドラッグします。

左側のパネルでテキスト、フォント、色、タイミングをカスタマイズします。

プレビューして、デザインとの整合性を確認します。

好みの形式でエクスポートし、プロジェクトに埋め込みます。

Filmora での高度なテキスト編集

ダイナミックなアニメーションと 10,000 以上のプリセット
色の塗りつぶし、輪郭、影の効果
バックグラウンドのカスタマイズ。
26 言語での音声合成

4.テキストアニメーションをロードする最良の例

ビデオのテキストアニメーションを読み込むウィンドウ

読み込みバーを使用したテキストの読み込み

カウントダウン付きのテキストの読み込み

結論

CSS の正確な制御を選択するか、Filmora のクリエイティブな柔軟性を選択するかに関係なく、巧みに作成された読み込みテキストアニメーションを使用すると、イライラする一時停止をユーザーにとってブランド化された魅力的な瞬間に変えることができます。