カーテンを開くような感じで文字を出現させる

こんにちは、ゆんつです。

この前Webサイトを見ていたら、面白いアニメーションに遭遇しました。

ページを開いた直後は文字にカバーがかかっていて、ページが開くと間もなく、そのカバーが徐々に外れて文字が現れるというアニメーションです。

まるでカーテンが開くかのように文字が現れてきて、とても面白いアニメーションだと思いました。

ゆんつ

面白い！

今日は

アニメーションを作りたいと思います。

作り方

文字をカバーで覆うのは簡単です。

カバーで覆いたい要素にwidth、heightがともに100%で背景色を設定した疑似要素をつけてpositionで位置をあわせてあげれば、その要素は疑似要素で作成したカバーで覆われた状態になります。

カバーがカーテンのように開くようにするには、疑似要素のwidthが0に上書きされるクラスを作成しておきます。

カバーが外れる速度はtransitonで調整。

後はjQueryを使って、一定のタイミングで、そのwidthが0になるクラスを付ければ「カーテンが開くかのように文字が現れる」アニメーションが完成します。

実際に作ってみます。

See the Pen
maku1 by konpure (@yuntu)
on CodePen.

「Click!」と書かれているボタンをクリックすると、カバーが外れて文字が現れるはずです。

このように、widthを100%から0にすることで、カーテンを外すかのように疑似要素で作ったカバーが外れて文字が現れます。

発展形

次は、複数行で順次カーテンが外れて文字が現れてくるアニメーションを作成します。

やることは先ほどと変わりませんが、jQueryでwidthを0にする処理を遅延させる必要があります。

See the Pen
maku2 by konpure (@yuntu)
on CodePen.

jQueryではdelayにより疑似要素のwidthが0になるクラスを付ける処理を遅延させています。

delayの後にすぐaddClassをつなげると正常に動作しないのでqueueを挟んでいます。

このような感じで、複数行にわたって順次カバーを外して文字が現れてくるアニメーションを作ることが出来ます。

それでは、またー。