オープニングアニメーションって誰もが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回目以降は動かないようにする
  }
});

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

• blog,
• code,
• web