<p>おことわり：class構文で書いていたものを公開用に書き直したので実用される時は適宜調整してください。<br>
あと車輪の再発明だったらすみません、、</p>

<p>実務でボツになった実装の供養です。</p>

<iframe height="265" style="width: 100%;" scrolling="no" title="Multiple Line Text Show Animation with JavaScript" src="https://codepen.io/hiroko_ino/embed/preview/QWGOjQj?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/hiroko_ino/pen/QWGOjQj'>Multiple Line Text Show Animation with JavaScript</a> by hiroko ino
  (<a href='https://codepen.io/hiroko_ino'>@hiroko_ino</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

<p>display: inline-blockとdisplay:blockで囲んでいるのが肝です。横幅をちょろっとだけ設定しているのは高さを確保したいから。その他あまり語ることはありません。CMSで表出されるタイトル・テキストなどにこのようなアニメーションをかけたい場合役に立つかもしれません。いや、役に立ったら嬉しい。</p>

type:any

複数行のテキストを一文字ずつ表出するjsを書きました（改行・レスポンシブ対応）

Category archives