ネイティブ CSS で無限テキストカルーセルを実装する一般的な方法

テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキストカルーセル付きの看板がよく見られます。この記事では、その実装ロジックを詳しく紹介します。

シナリオ

店舗のドアの看板には、水平に動くテキストでアナウンスを表示する必要があります (わかりやすいように境界線が追加されます)。

論理的な説明

無限のテキスト回転を実現するための主なロジックは 2 つあります。

テキストを水平に移動する
テキストは冒頭で終了

最初の実装方法は、CSS アニメーション transform: translateX(-50%) を使用することです。これは、それ自体の半分を左に移動することを意味します。

ポイント2の実装方法はポイント1と関連しています。デフォルトでは、CSS アニメーションは再生が完了した後に変化します。つまり、再生が完了すると位置が初期位置に変化します (変化は瞬時に完了し、肉眼では認識できません)。そのため、変化を使用してテキストの先頭と末尾を接続できます。

同一のテキストを 2 つ使用します。最初のテキストの再生が終了し、2 番目のテキストの再生が開始されると、アニメーションが突然変化し、最初のテキストの再生が再開されます。2 つのテキストの内容は同じであるため、ユーザーはそれに気づきません。

考える

この実装は現在一般的ですか?

この方法は実際にほとんどのニーズを解決しましたが、テキストが少ない場合やテキストの幅がウィンドウの幅よりも小さい場合は問題が発生します。私が描いた回転ロジック図は、その一例にすぎません。

テキストの幅がウィンドウの幅よりも小さい場合、これを実現するにはどうすればよいですか?

実際、原理は同じです。テキスト回転の中心的な機能の 1 つは、2 つの同一のテキストを持つことです。ただし、前提条件として、テキストの幅がウィンドウの幅よりも大きくなければなりません。

この前提条件をどのように達成するのでしょうか?

答えは、テキストの幅がウィンドウの幅よりも大きくなるまでテキスト全体をコピーし、それを 2 つの同一のテキストに処理することです。

要約する

無限テキスト回転のポイントは次のとおりです。

テキストの幅はウィンドウの幅よりも大きくする必要があります。テキストの幅が足りない場合は、テキストの幅がウィンドウの幅よりも大きくなるまでテキスト全体をコピーします。
2つの同一のテキスト
距離の50%を移動する

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>テキスト無限カルーセル</title>
 
    <スタイル>
        体 {
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            高さ：100vh;
        }
 
        ＃包む {
            オーバーフロー: 非表示;
            位置: 相対的;
            幅: 200ピクセル;
            高さ: 20px;
            空白: ラップなし;
        }
 
        #内部 {
            位置: 絶対;
            アニメーション: スライド 5 秒 線形無限;
        }
 
        ＃初め{
            表示: インラインブロック;
            境界線: 1px 実線の赤;
        }
 
        ＃2番{
            表示: インラインブロック;
            境界線: 1px 緑;
        }
 
        @keyframes スライド {
            0% {
                変換: translateX(0);
            }
            100% {
                変換: translateX(-50%);
            }
        }
    </スタイル>
</head>
<本文>
<div id="wrap">
    <div id="内部">
        <span id="first">当店では主にラーメン、麺類、煮込み麺、丼ものを販売しております</span>
        <span id="second">当店では主にラーメン、麺類、煮込み麺、丼ものを販売しております</span>
    </div>
</div>
</本文>
</html>

これで、ネイティブ CSS で無限テキストカルーセルを実装する一般的な方法についての記事は終了です。CSS で無限テキストカルーセルを実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブホットスタンバイ) を構築します。

>>: Webフロントエンド開発におけるエラーを見つけるための基本的な考え方