なぞるようにといっても、書き順通りに文字を書いていくようなものではなくて、左から右へ徐々にスライドさせて色を変えるエフェクト。

なんと言ったらいいのかよく分からないのですが、所謂、プログレスバーのように進行しながら、徐々に色を変えていくアニメーションのやり方です。

Javascriptは利用せず、CSSだけで実装してます。JSと組み合わせればもっと色々なことできそうですが、ここでは単純にマウスホバーでアニメーションさせたものを紹介します。

デモ

以下の四角い枠内をマウスホバーしてみてください。

THE PROGRESSIVE ERA

テキストの色が左から右へ徐々にスライドしながら変化しているのが分かると思います。古いブラウザには対応していませんが、最新のブラウザであれば問題なく表示できていました。

HTMLとCSS

やり方は至って簡単。

HTML

<p class="text-progress" data-txt="THE PROGRESSIVE ERA">THE PROGRESSIVE ERA</p>

HTMLは何でもいいんですが、必要なのはデータ属性で、値にp要素内と同じテキストを入力しておきます。

CSS

.text-progress {
    position: relative;
    width: 300px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
    color: #ccc;
}

.text-progress::after {
    content: attr(data-txt);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    line-height: 100px;
    color: #1a1e24;
    clip: rect(0,0,100px,0);
    transition: clip 1.5s linear;
}

.text-progress:hover::after {
    clip: rect(0,300px,100px,0);
}

不要なものもありますが、重要なのは赤太字のプロパティ。

スライドしながら現れる黒いテキストは、after疑似要素で作成しています。contentプロパティのattrに、HTMLで設定したデータ属性を指定。こうすることでデータ属性の値を取得することができ、全く同じテキストの文字列が２つできることになります。

これを一旦、clipプロパティを使って全て切り抜き（rect内、左から2番目のrightをゼロにする）、疑似要素のテキストを非表示の状態にします。

マウスホバー時に、徐々にアニメーションしながらスライドするように見せるためtransitionを設定し、あとはhover疑似クラスに、今度はテキストが表示されるだけの長さのpx値を、clipプロパティのrightに指定し完成です。

clipプロパティは、position:absoluteを持った要素にだけ適用されるので、忘れずに設定しておく必要があります。この時、親要素にposition:relativeを設定しておくと、位置を固定しやすくなりますね。

ホバーエフェクトのちょっとしたアクセントに良いかと思います。海外のサイトでは、これを実際にプログレスバーに利用しているものがあって、工夫次第で色々と面白い表現ができそうです。