jquery.cookie.jsを使用して、最初のみオープニングアニメーションを稼働させる方法

オープニングアニメーションって誰もが1度は実装してみたい…。と思い
実装したことがあるのではないでしょうか?

私もその一人だったのですが、いざオープニングアニメーションを実装した
ウェブサイトを構築する際に壁にぶつかるのが、
『毎回毎回アニメーションが発動する…』ということ。

テンションが上がっていたのははじめだけで、あとは更新のたびに出てくるから
構築時もうざくてしょうがないし、公開してからもユーザー様にはデメリットしかない!
ということで今回は、jquery.cookie.jsを使って、
はじめだけオープニングアニメーションを表示させる方法をご紹介します。

実装自体は結構簡単なので、「どうすればいいんだー!?」となっている人は
一度試して下さい。

準備しておくもの

・アニメーション用のHTML
・デザイン調整用のCSS
・jquery.cookie.js

<div id="loading">
  <img src="images/load\animetion.png" alt="ローディング用画像">
</div>

※SCSSでの記載

#loading {
 width: 100%;
 height: 100%;
 background: #333;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 99999;
  img {
    width: 100%;
    max-width: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}
 
.loading img {
 width: 200px;
 position: absolute;
 top: 50%;
 left: 45%;
 margin-top: -20px;
 margin-left: -20px;
}
$(function(){
  // 1回目のアクセス
  if($.cookie("access") == undefined) {
    //最初にアクセスしたときにはここに書いたアニメーションのJSが動く
    $.cookie("access","onece");
    $("#loading").css("display","block")
  // 2回目以降は動かないようにするけど最初は動かす
  } else {
$("#loading").css("display","none")
    // 2回目以降は動かないようにする
  }
});

これで完了です!すぐにでも実装できるので試してみてくださいね★