アニメーションなど一度見たら24時間以内（再訪問）は表示させない方法（css Cookie）

head内の記述

最近よく見るアクセス時にアニメーションが始まるサイトなどで2回目は見せたくない時に使える

24時間以内に再訪問した時にポップアップやアニメーションを表示させたくない時に役に立つ方法をご紹介いたします。

まずは「head」内にCDNのjqueryを読み込んでください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

body内の記述

これで初回アクセスか再訪問以降か判別するscriptの記述を書き込みます。

24時間が86400秒で設定してますが秒数を変更することで初回アクセスから表示させない時間を変更できます。

『.sampe-animenone』（任意変更可）をclassで指定すれば

初回アクセスが『display: block;』で再訪問が『display: none;』になる仕組みです。

<!-- 24時間以内の再訪問は非表示にする -->
<script>
  $(function(){
    if($.cookie("access") == undefined) {
    var date = new Date();
    date.setTime( date.getTime() + ( 86400 )); // 24時間=86400秒
    $.cookie( "access", "seconds", { expires: date });
      $(".sample-animenone").css("display","block") // 初回アクセスは表示
    } else {
      $(".sample-animenone").css("display","none") // 再訪問以降のアクセスは隠す
    }
  });
</script>

head内の記述

body内の記述

関連記事