ストリームテキストの実装

画面上でテキストの左への無限の流れを実現しましょう.

サスペンション時にテキストの色が濃くなり、流れが止まります.

この実現は想像以上に簡単ですが、htmlとcssでしか実現できません.
まずhtml構造は次のようになります.

            <div class="flow-container">
                <div class="flow-text">
                    <div class="flow-wrap">Text that flows from right to left. </div>
                    <div class="flow-wrap">Text that flows from right to left. </div>
                    <div class="flow-wrap">Text that flows from right to left. </div>
                    <div class="flow-wrap">Text that flows from right to left. </div>
                </div>
            </div>

スクリーン上で無限に流れるテキストを実現するために、テキストを囲むdiv.flow-wrapラベルが複数作成されます.もちろん、重複するテキストの長さに応じて、数を増やしたり減らしたりすることができます.
div.flow-conainerは、テキストの上下に空間を埋め込むために作成されます.
div.flow-textにダウンジャケットを打てばいいのではないでしょうか.このようにもう一度包む理由は,テキストのみを無視したときに流れるテキストを停止させるためである.設計上、div.flow-textにHoverを適用すると、テキストではなくエッジでHoverを行うため、テキストの上下にスペースを残す必要があります.テキストも停止します.

作成したcssは以下の通りです.

  .flow-text {
	  display: flex;
      flex: 0 0 auto;
      white-space: nowrap;
      overflow: hidden;
      transition: 0.3s;
      font-size: 2.5rem;
      font-weight:bold;
      color: #9D9993;
  }
  .flow-text:hover {
    color: #000;
  }
  .flow-text:hover .flow-wrap {
    animation-play-state: paused;
    cursor: pointer;
  }
  .flow-wrap {
    animation: textLoop 10s linear infinite;
    padding-right: 1.4881vw;
  }
  
  @keyframes textLoop {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }

ストリームテキストを実装する重要な点の1つはdiv.flow-textのstyle属性であり、以下に示す.

	display: flex;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;

表示:flex;
flex:0 autoは、スクリーン縮小時に項目のサイズを縮小しないようにします.
白いスペース:nowrap;
オーバーフロー:hidden;
次にアニメーションのオブジェクトはdiv.flow-wrapです
transform:translation 3 d(0%)からtranslation 3 d(-100%)に変わります.
左に流れて、100%です.このとき、translate 3 dをtranslate Xに変換することができる.
しかし、translation 3 dを使用すると、ハードウェアの超高速(GPU)を使用し、より良いパフォーマンスを発揮します.
translate Xのみを必要としても、translate 3 dを使用してパフォーマンスを向上させることができます.
簡単で流暢なテキストを体現している.
しかし、テキストの長さや画面幅に応じてdiv.flow-wrapの数を調整する必要があり、メンテナンス面ではあまりよく見えません.
この問題をどう解決すればいいか考えて次のヒントで話してください.