sikaku

CSSのみで文字送りの実装

いろはにほへと　ちりぬるを
わかよたれそ　　つねならむ
うゐのおくやま　けふこえて
あさきゆめみし　ゑひもせすん

CSSアニメーションを利用した文字送りです。

使えるか使えないかと問われると多分使えない。普通にjavaScriptを使おう。

iOS系だと複数行には対応していません。

source code

基本

HTML
  1. <span class="text_fader">テキスト</span>
CSS
  1. @supports (-webkit-background-clip:text) or (background-clip:text) {
  2. .text_fader {
  3. --length: 4;
  4. --speed: 100ms;
  5. padding: 0.2em 0;
  6. background: linear-gradient(currentColor 0 100%) no-repeat 0 0 / 0 100%;
  7. -webkit-background-clip: text;
  8. background-clip: text;
  9. -webkit-text-fill-color: transparent;
  10. text-fill-color: transparent;
  11. animation: text_fader calc( var(--length) * var(--speed) ) steps(var(--length),end) 0s 1 both;
  12. }
  13. @keyframes text_fader {
  14. 0% { background-size: 0 100%}
  15. 100% { background-size: 100% 100%}
  16. }
  17. }
調整用情報

4：テキスト字数

100ms：一字あたりの表示時間

注意点

テキスト部分で半角全角文字の併用や、文字幅に差のあるフォントを使用すると表示がぶれる恐れがあります。(後述『仕組みについて』の調整部分で色々試していただければ視覚的にも分かり易いかと思います)

文字幅の差については調整が面倒なようならfont-family: monospace;等指定で対応してください。

何をやっているのか

  • いろはにほへと
    内容を書いたインライン要素を用意
  • いろはにほへと
    linear-gradient関数で文字色と同色に塗り潰した背景画像を用意
  • いろはにほへと
    背景画像のサイズが変わるアニメーションを付与
  • いろはにほへと
    アニメーション進行割合を段階制に(文字数での分割)
  • いろはにほへと
    background-clipで背景の表示範囲を文字部分のみに指定
  • いろはにほへと
    text-fill-colorで文字色を透明に指定
調整