I have a pen.
見出しなどに上記のようなアニメーションを設定できたら、注目度が高まって、コンテンツの続きを読んでもらえる可能性が上がるかもしれません。
この表現を実現するには、CSSの機能だけで十分です。
ポイントはsteps()関数で、animationでの動きを段階的に表示することができます。たとえば、steps(5)としたならば、5段階に分けてコマ送りのようにアニメーションが再生されます。
そして、文字が1文字ずつ現れるように見せるために、フォントは等幅フォントを指定しておきますが、この時に文字列の幅の指定にはchという単位を使用します。
chはCSS3で新しく定義された単位で、「1ch＝0の文字幅」になります。
上記の「I have a pen.」では、width: 13ch; ということになります。（空白スペースやピリオドなども1chにカウントします）
さらに文字列が折り返すのを防ぐためにwhite-space:nowrap;を指定し、はみ出たところを隠すためにoverflow:hidden;としておきます。
ここまでをまとめると、以下のようなCSSの記述になります。
次に点滅するカーソルの設定ですが、これまでの応用でできます。
まず、文字の右側にborder-right: .05em solid;で擬似的なカーソルを表現しておきます。これをアニメーションで等間隔に透明にさせれば、まるで本物のカーソルが点滅しているかのように見えます。
点滅するカーソルの設定を追加したコードは以下の通りです。
これで、めでたしめでたしとしたいところですが、実はちょっと問題があります。
上記の例では、英語だったので問題なく表示されました。しかし、日本語の場合は、ダブルバイト文字になるので、同じように日本語を使うと、ちょっと不自然に再生されてしまいます。
ペン持ってる!
このように文字が半分ずつ現れてしまって、実際にタイピングされている文字とは、違って見えてしまいます。
完璧な解決策にはなりませんが、文字列の幅の単位をchからemに変更すると、いくらかマシにはなります。このときの文字列の幅は、バイト数ではなく日本語の文字数を設定しておきます。
ペン持ってる!
こんな感じで、やはりちょっと違和感は残ります。ちょっとずつずれが溜まってきて、後半には大きくずれてしまいますね。勘付かれないように再生速度を速めてみましたが、バレてますよね( ・∇・)
でも、訪問者の注意を引くという目的は、なんとか達成できそうなので、よかったら使ってみてください。
