前提・実現したいこと
ワードプレスでサイト構築をしています。
サイトに初回アクセス時にオープニングアニメーションを表示後にTOPページを表示、ブラウザを閉じるまではアニメーションを読み込まない設定にしたいです。
発生している問題・エラーメッセージ
初回のローディングアニメーションまでは問題なく表示されますが、リロードすると表示が真っ白になってしまいます。
jsが不得意のため、JSの書き方に問題があるかと思われますので、詳しい方ご教示いただけると幸いです。
該当のソースコード
■header.php内 javascript
<script type="text/javascript">
const keyName = 'visited';
const keyValue = true;
if (!sessionStorage.getItem(keyName)) {
//sessionStorageにキーと値を追加
sessionStorage.setItem(keyName, keyValue);
//ここに初回アクセス時の処理 jQuery(function() { setTimeout(function(){ jQuery('.start p').fadeIn(1600); },500); //0.5秒後にロゴをフェードイン! setTimeout(function(){ jQuery('.start').fadeOut(3000); },5000); //5秒後にロゴ含め真っ白背景をフェードアウト!
});
} else {
//ここに通常アクセス時の処理
jQuerystart.addClass('none');
sessionStorage.setItem('access', 0);
}
</script>
■header.php内 body直下 HTML
<div class="start">
<p><img src="/wp-content/uploads/2020/07/o_animation03.gif" alt=""></p>
</div>
■css
/* オープニングアニメーション */
.start {
background: #FFF;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9000;
}
.start p {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 9999;
width: 1000px;
}
.none{display:none;}
試したこと
下記URLを参照にJSを真似て実装してみました
https://into-the-program.com/execution-firsttime-access/
▼▼ 参照コード ▼▼
const keyName = 'visited';
const keyValue = true;
if (!sessionStorage.getItem(keyName)) {
//sessionStorageにキーと値を追加
sessionStorage.setItem(keyName, keyValue);
//ここに初回アクセス時の処理 console.log("初めての訪問です");
} else {
//ここに通常アクセス時の処理
console.log("訪問済みです");
}
至らないコードで恐縮ですが、ご教示の程よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー