ゆうやの雑記ブログゆうやの雑記ブログホームHTML・CSS・JSjquery.cookie.jsを使ってスプラッシュ画面を作る方法ゆうや2019/12/20SHAREツイートシェアはてブGoogle+PocketLINEこんにちは、UVERworld布教クリエイターのゆうやです!前回の「jquery.cookie.jsでクリックしたら要素を一定期間表示させないようにする方法」に続いて、今回もjquery.cookie.jsを使ったTipsをご紹介します。↓↓前回の記事はこちらjquery.cookie.jsでクリックしたら要素を一定期間表示させないようにする方法さてさて今回はスマートフォンアプリ起動時に見られるような「スプラッシュ画面」を実装する方法をご紹介したいと思います!↓↓スプラッシュ画面とは例えばTwitter起動時に表示されるこちらです。上下左右中央にロゴがあり、背景色はそのサービスのテーマカラーといった感じですね!それでは参りましょう。参考記事まとめjquery.cookie.jsを使ってスプラッシュ画面を実装しよう!完成イメージの共有スマホ表示のスクショです!今回実装するスプラッシュ画面の仕様としては以下になります!初回アクセス時に表示ここで言う初回アクセスとはブラウザを閉じて再度アクセスしてきたときのことを指すスプラッシュ画面を2秒間表示して0.5秒かけてフェードアウトさせる実際に動いているサンプルを確認したい方は以下のサンプルページよりご覧になってくださいまし。</div></div>画像ではなくテキストを表示したい場合は、imgタグの箇所を任意のpタグなどに変更してください(^o^)画像がない方は、XDやイラレで適当に作って試してみて下さい(^o^)スプラッシュ画面のCSSCSSでスプラッシュ画面をスクリーンいっぱいに表示させ、ロゴ画像を上下左右中央に設置します!※一瞬.mainなどスプラッシュ画面以外の要素が先に表示される問題が発生していたのでいくつかコードを2020年1月9日追記いたしました。今回の例だとmainタグにdisplay:noneを指定して初期状態では非表示としておきます。↓↓以下のようにjquery.cookie.jsのスクリプトを書いていきましょう〜!※一瞬mainなどスプラッシュ画面以外の要素が先に表示される問題が発生していたのでいくつかコードを2020年1月9日追記いたしました。$.whenの中の処理が全て完了したら、doneの処理を行うようにしています。それに加えスプラッシュ画面以外の要素はcssでdisplay:noneで非表示にしているのでshowメソッドで表示してやるのも忘れずに(^o^)クッキーがない場合が、elseの処理でnoneになっている要素をshowメソッドで表示してやります。TAMまとめ以上、jquery.cookie.jsを使ってスプラッシュ画面を作る方法をご紹介しました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。