CSS 3アニメーションを使ってテキストスクロールを実現します.

以前はテキストスクロールをよく使用していましたが、現在はH 5の台頭に伴い、このラベルの悪い体験に鑑みて、このラベルはW 3 C標準で破棄されました.今はブラウザはこのラベルを支持していますが、文字スクロールの新しい方式を探すのが未来の選択です.多くの人がjsスクリプトを使って文字スクロールを実現することができます.これは互換性と操作性が最も強いやり方です.しかし、このような方法は、頻繁にタイマーを使用して、リアルタイムでDOMを操作し、マークeeよりも多くのスクロール効果と機能を実現するほか、性能消費を減少させていません.また、Vue、Reactなどの新興のMVMフレームの中で、DOMビューをデータで縛ることがあります.この場合、js操作DOMを使ってテキストスクロールを実現すると、このバインディングを破壊する可能性があります.文字が変わったらDOMの更新ができなくなります.CSSの発展に従って、文字スクロールをより良い方法で実現しました.それはCSSアニメーションを使うことです.もちろん、テキストをスクロールさせるだけで、動画を平行移動させたらいいです.

しかし、このスクロール方式の体験はとても悪くて、途中に余白があります.次に、頭と尾がつながっている文字のスクロールを実現します.jsを使ってDOM構造を変えない前提で、spanに重複した内容を追加するにはafterダミー要素が使えます.atr関数は父要素の属性内容を取得できます.前提はspanの内容を事前に属性に設定して、例えばdata-textを使うと、CSSを使ってspanに尾部の内容を追加できます.これはVUEなどのフレームワークを使うのに便利です.

上记は基本的に最后につながる文字のスクロールを実现しましたが、inline性を持つ要素は上层部の多くのスタイルを継承してレイアウトに影响を与えます.差異を平らにするために、私達はafter元素に対して絶対位置付けを使います.

このように純粋なCSSで実現された文字スクロールの効果は実現されます.文字の長さを超えるスクロールを実現するには、div内のspan幅がオーバーしているかどうかを判断し、divにscroll類を追加すればいいです.しかし、上記の実装はまだ欠点があります.アニメーションのサイクルは前もって決められています.異なる長さの文字に対して、スクロールのスピードは速くて遅くなります.もしどの文字の長さに対しても固定速度でスクロールするなら、jsを使ってspanの幅に応じて動画の周期を動的に指定できます.