BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】ネイティブCSSでテキストの無制限回転を実現する汎用的な方法

2022-01-11 20:46:28

テキストローテーションは生活に密着しており、様々なスーパーマーケットや実店舗には、たいていテキストローテーションの看板が設置されています。

シナリオ

店頭の広告塔で、文字が横に動く告知を表示する必要がある（見やすくするためにボーダーを追加）。

画像

ロジックの説明

テキストの無限回転を実現するためのロジックは、大きく2つのポイントに分かれます。

  • テキストが水平に移動する
  • テキストの最初と最後 

1点目は、CSSアニメーション、transform: translateX(-50%)を使って、自分自身の半分を左にパンすることで実現しています。

2つ目の実装は、1つ目のポイントに関連しています。CSSアニメーションはデフォルトで変異しています。つまり、再生が終了すると位置が初期位置に変異するので（変異は瞬間的で人間の目には認識できません）、変異を利用してテキストの最初と最後を実現することができるのです。

同じテキストを2つ使い、1つ目のテキストが終了して2つ目のテキストの再生が始まると、アニメーションの変異により再び1つ目のテキストの再生が始まりますが、2つのテキストの内容は同じなので、ユーザーには知覚されないのです。

考える

現在の実装は万能か？

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

テキストの幅がウィンドウの幅より小さい場合、どうすれば実現できますか？

理由は同じです。コアテキストの回転の1つは、2つの同じテキストを必要としますが、1つのテキストの幅がウィンドウの幅より大きくなければならないことが前提となっています。

この前提条件を満たすにはどうしたらいいのでしょうか？

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

要約する

テキストの無限回転の要点は以下の通りです。

  • テキストの幅がウィンドウの幅より大きいこと、テキストの幅が足りない場合は、テキストの幅がウィンドウの幅より大きくなるまでテキストを全体としてコピーすること
  • 同じテキストが2つある場合
  • 距離の50％移動

コード 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> text-infinite rotation</title>
 
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
 
        #wrap {
            overflow: hidden;
            position: relative;
            width: 200px;
            height: 20px;
            white-space: nowrap;
        }
 
        #inner {
            position: absolute;
            animation: slide 5s linear infinite;
        }
 
        #first{
            display: inline-block;
            border: 1px solid red;
        }
 
        #second{
            display: inline-block;
            border: 1px solid green;
        }
 
        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="inner">
        <span id="first"> Our main business is ramen, knife-cutting noodles, chow mein, covered rice</span>
        <span id="second">This restaurant specializes in ramen, knife-cutting noodles, chow mein, and topped rice</span>
    </div>
</div>
</body>
</html>

ネイティブCSSのこの記事は、これに導入され、無制限のテキストの回転を達成するために、より多くの関連するCSSは、以前の記事のスクリプトのホームを検索してくださいまたは次の関連記事を閲覧し続け、私はあなたが将来的にもっとスクリプトのホームをサポートすることを願っています！.

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します