jquery.cookie.jsを使ってスプラッシュ画面を作る方法

こんにちは、ゆうやです！

前回の「jquery.cookie.jsでクリックしたら要素を一定期間表示させないようにする方法」に続いて、今回もjquery.cookie.jsを使ったTipsをご紹介します。

↓↓前回の記事はこちら

jquery.cookie.jsでクリックしたら要素を一定期間表示させないようにする方法

さてさて今回はスマートフォンアプリ起動時に見られるような「スプラッシュ画面」を実装する方法をご紹介したいと思います！

↓↓スプラッシュ画面とは例えばTwitter起動時に表示されるこちらです。

上下左右中央にロゴがあり、背景色はそのサービスのテーマカラーといった感じですね！

それでは参りましょう。

jquery.cookie.jsを使ってスプラッシュ画面を実装しよう！
まとめ

jquery.cookie.jsを使ってスプラッシュ画面を実装しよう！

完成イメージの共有

スマホ表示のスクショです！

今回実装するスプラッシュ画面の仕様としては以下になります！

初回アクセス時に表示
ここで言う初回アクセスとはブラウザを閉じて再度アクセスしてきたときのことを指す
スプラッシュ画面を2秒間表示して0.5秒かけてフェードアウトさせる

実際に動いているサンプルを確認したい方は以下のサンプルページよりご覧になってくださいまし。

サンプルページでスプラッシュ画面をみる

スプラッシュ画面のHTML

index.html

<div class="WelcomeLayer">
  <div class="Welcome">
    <!-- 上下左右中央に表示する画像 -->
    <img src="./img/splash-logo.png" class="Welcome-Logo">
  </div>
</div>

画像ではなくテキストを表示したい場合は、imgタグの箇所を任意のpタグなどに変更してください(^o^)

画像がない方は、XDやイラレで適当に作って試してみて下さい(^o^)

スプラッシュ画面のCSS

CSSでスプラッシュ画面をスクリーンいっぱいに表示させ、ロゴ画像を上下左右中央に設置します！

※一瞬.mainなどスプラッシュ画面以外の要素が先に表示される問題が発生していたのでいくつかコードを2020年1月9日追記いたしました。

今回の例だとmainタグにdisplay:noneを指定して初期状態では非表示としておきます。

index.css

main{ display: none; }
/* ---------------------------- */
/* --- スプラッシュ画面 --- */
/* ---------------------------- */
.WelcomeLayer{
  width: 100%;
  height: 100vh;
  display: none;/*デフォルト非表示*/
  background: #5BC8AC;
  z-index: 2019;
}
.Welcome{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.Welcome-Logo{
  margin-left: auto;
  margin-right: auto;
}
// PC表示の時のスタイル
@media screen and (min-width:768px){
  .Welcome{
    width: 80%;
  }
  .Welcome-Logo{
    max-width: 680px;/*最大幅指定*/
  }
}

スプラッシュ画面の背景色やロゴ画像の最大幅はご自身のプロジェクトに合わせて変更してくださいまし(^o^)

cookieの設定

↓↓以下のようにjquery.cookie.jsのスクリプトを書いていきましょう〜！

※一瞬mainなどスプラッシュ画面以外の要素が先に表示される問題が発生していたのでいくつかコードを2020年1月9日追記いたしました。

$.whenの中の処理が全て完了したら、doneの処理を行うようにしています。

それに加えスプラッシュ画面以外の要素はcssでdisplay:noneで非表示にしているのでshowメソッドで表示してやるのも忘れずに(^o^)

クッキーがない場合が、elseの処理でnoneになっている要素をshowメソッドで表示してやります。

index.js

// cookieの値がisOpenじゃなかったら表示
  if ($.cookie('WelcomeLayer') != 'isOpen') {
    $.when(
      $('.WelcomeLayer').show()
    )
    .done(function(){
      setTimeout(function(){
        $('.WelcomeLayer').fadeOut(500);
      },2000),
      $('main').show(),
      $.cookie('WelcomeLayer', 'isOpen')
    })
    .fail(function() {
      console.log('error');
    });
  } else {
    $('main').show();
  }

クッキー（$.cookie）の第3引数を省略しているので、クッキーの有効期限は「ブラウザを閉じるまで」となります！