no-repeat;cursor:pointer}.broken_link,a.broken_link{text-decoration:line-through}こんぷれHOMEプロフィールお問い合わせホームチャレンジプログラミングjQueryカーテンを開くような感じで文字を出現させるjQueryTwitterFacebookはてブPocket2019.05.12こんにちは、ゆんつです。この前Webサイトを見ていたら、面白いアニメーションに遭遇しました。ページを開いた直後は文字にカバーがかかっていて、ページが開くと間もなく、そのカバーが徐々に外れて文字が現れるというアニメーションです。カーテンが開くかのように文字が現れてきて、とても面白いアニメーションだと思いました。今日は「カーテンを開けるかのように文字を出現させる」アニメーションを作りたいと思います。作り方カバーで文字を覆うのは簡単です。カバーで覆いたい要素にwidth、heightがともに100%で背景色を設定した疑似要素をつけてpositionで位置をあわせてあげれば、その要素は疑似要素で作成したカバーで覆われた状態になります。カバーがカーテンのように開くようにするには、疑似要素のwidthが0に上書きされるクラスを作成しておきます。カバーが外れる速度はtransitonで調整。後はjQueryを使って、一定のタイミングでそのwidthが0になるクラスを付ければ「カーテンが開くかのように文字が現れる」アニメーションが完成します。CodePen.0「Click!」と書かれているボタンをクリックするとカバーが外れて文字が現れるはずです。このようにwdthを100%から0にすることでカーテンを外すかのように疑似要素で作ったカバーが外れて文字が現れます。次は複数行で順次カーテンが外れて文字が現れてくるアニメーションを作成します。やることは先ほどと変わりませんが、jQueryでwidthを0にする処理を遅延させる必要があります。CodePen.0jQueryではdelayにより疑似要素のwidthが0になるクラスを付ける処理を遅延させています。delayの後にすぐaddClassをつなげると正常に動作しないのでqueueを挟んでいます。このような感じで、複数行にわたって順次カバーを外して文字が現れてくるアニメーションを作ることが出来ます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。プロフィールこっそりゆんつ山口県在住です。Reserved.メニューHOMEプロフィールお問い合わせホーム検索トップサイドバープロフィールこっそりゆんつ山口県在住です。(17)エックスサーバーで。