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

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

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

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

↓↓前回の記事はこちら

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

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

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

twitterスプラッシュ画面

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

それでは参りましょう。

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引数を省略しているので、クッキーの有効期限は「ブラウザを閉じるまで」となります!

参考記事

参考 javascript – ウェブサイトが読み込まれる前のようこそ画面コードログ 参考 jQuery.when() で、複数の非同期処理を扱う Tips Note by TAM

まとめ

以上、jquery.cookie.jsを使ってスプラッシュ画面を作る方法を紹介しました。

jquery.cookie.jsはブラウザの機能を使用しているのでフロントのみでクッキーを操作できるのでとても便利ですね!

今回紹介したjquery.cookie.js以外にもjqueryやjsには便利なライブラリがたくさんありますね!

他にもWebサイト制作でよく使用する便利なライブラリに興味がある方は以下の記事もチェックしてみてください〜!

【Swiper.jsカスタマイズ】サムネイル付きスライドショーを作る方法【Swiperカスタマイズ】サムネイル付きスライドショーを作る方法 スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です