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

jQuery

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

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

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

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

今日は「カーテンを開けるかのように文字を出現させる」アニメーションを作りたいと思います。

スポンサーリンク

作り方

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

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

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

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

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

実際に作ってみます。

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

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

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

発展形

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

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

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

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

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

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

それでは、またー。

jQuery
ゆんつをフォローする
スポンサーリンク
スポンサーリンク
こんぷれ

コメント

タイトルとURLをコピーしました