WEBページ立ち上げ時に1回のみ、画像を表示させ、fadeoutさせていく方法が知りたいです

WEBページ立ち上げ時に1回のみ、画像を表示させ、fadeoutさせていく方法を知りたいです。

現在、webページを立ち上げると企業ロゴが表示されてからページが表示されますが、トップページに戻るたびに企業ロゴが表示されてます。そのため、ページ立ち上げ時に1回のみ画像を表示させfadeoutさせる方法を教えて頂けると大変嬉しです。

html→
<div class="start">
<p><img src="画像" alt="企業ロゴ"></p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-co …
をbodyの終了直前に読み込み

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: 280px;
}

JavaScript→
$(function() {
setTimeout(function(){
$('.start p').fadeIn(1600);
},500);
setTimeout(function(){
$('.start').fadeOut(500);
},2500);
});
$(function(){
$(".start").show();
$.cookie('btnFlg') == 'on'?$(".start").hide():$(".start").show();
$(".start-area").click(function(){
$(".start").fadeOut();
$.cookie('btnFlg', 'on', { expires: 30,path: '/' });
});
});

No.3 ベストアンサー 回答者： fujillin 回答日時： 2020/07/07 15:06

No2です。

・・・ようやっとわかりました。
ご提示のものは、質問者様が作成なさったわけではないのですね。
（作ったものだとばかり勘違いをしていました）

能書きを書くのは無駄でしたね。

$(() => {
if(document.cookie.split(";").some(p => p.includes("btnFlg=on"))){
$(".start").hide();
} else {
document.cookie = "btnFlg=on; max-age=31536000";
$(".start p").delay(500).fadeIn(1600, ()=> {
$(".start").delay(400).fadeOut(500); });
};
});

この回答へのお礼

度々ありがとうございます。説明が足りず申し訳ありませんでしたが、それでも対応して頂き、感謝の気持ちでいっぱいです！

お礼日時：2020/07/07 18:23

No.2 回答者： fujillin 回答日時： 2020/07/07 09:12

No1です

＞具体的に ～～ を書く場所は、～～ の中でどのようになるのでしょうか。
全体構成の話をしていますので、部分修正でなさりたいのなら、ほかの方法を考えてください。
（部分修正でやりようがあるのかわかりませんが）
むしろ逆に、ご提示のスクリプトのうちの、使える部分を再利用すればよろしいかと。

$(function() {
　 /*　No1の構成 */
});

No.1 回答者： fujillin 回答日時： 2020/07/03 10:24

こんにちは

スクリプトの意図がよくわからんようになってるけれど・・・


＞ページ立ち上げ時に1回のみ画像を表示させ～
ご提示の内容では、表示（fadeIn/Out）のスクリプトを単独で実行するようにしてあるので、必ず実行されることになっています。つまり、常にロゴが表示されるようになっています。

最初にcookieの有無を判断して、
　・存在していれば「.start」を非表示
　・存在していなければ、表示するスクリプトを実行
とすれば良いのではないでしょうか？

　if (/* cookieの有無を判定 */) {
　　　/* .startを非表示に（=ロゴは表示されない） */
　} else {
　　　/* ロゴのfadeIn-Outを行い、cookieを設定 */
　}
といった感じ。

この回答へのお礼

ご回答ありがとうございます。
具体的に　if (/* cookieの有無を判定 */) {
　　　/* .startを非表示に（=ロゴは表示されない） */
　} else {
　　　/* ロゴのfadeIn-Outを行い、cookieを設定 */
　}

を書く場所は、
$(function() {
setTimeout(function(){
$('.start p').fadeIn(1600);
},500);
setTimeout(function(){
$('.start').fadeOut(500);
},2500);
});
$(function(){
$(".start").show();
$.cookie('btnFlg') == 'on'?$(".start").hide():$(".start").show();
$(".start-area").click(function(){
$(".start").fadeOut();
$.cookie('btnFlg', 'on', { expires: 30,path: '/' });
});
});

の中でどのようになるのでしょうか。
私自身で考えてみがら書いてみたのですが、うまく表示できず、
また質問させて頂く形になってしまった事、申し訳ありません。

お礼日時：2020/07/06 19:16