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ベストアンサー
- 回答日時:
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); });
};
});
No.2
- 回答日時:
No1です
>具体的に ~~ を書く場所は、~~ の中でどのようになるのでしょうか。
全体構成の話をしていますので、部分修正でなさりたいのなら、ほかの方法を考えてください。
(部分修正でやりようがあるのかわかりませんが)
むしろ逆に、ご提示のスクリプトのうちの、使える部分を再利用すればよろしいかと。
$(function() {
/* No1の構成 */
});
No.1
- 回答日時:
こんにちは
スクリプトの意図がよくわからんようになってるけれど・・・
>ページ立ち上げ時に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: '/' });
});
});
の中でどのようになるのでしょうか。
私自身で考えてみがら書いてみたのですが、うまく表示できず、
また質問させて頂く形になってしまった事、申し訳ありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のランダム表示、及び画像...
-
オンマウスで画像が切り替わっ...
-
USEMAPでの指定区域にマウスオ...
-
Javascriptで指定した日付と時...
-
表と裏がある1枚の画像を回転す...
-
表示する画像をファイル名を受...
-
<EMBED>タグのSRCの値のみ変更
-
prettyphotoの画像表示について
-
画像の入れ替え
-
WEBページ立ち上げ時に1回のみ...
-
オンマウスで、画像切り替え+...
-
java scriptで現在のURLで条件分岐
-
2つの別ウインドウの表示
-
クリックして変更した画像を他...
-
リロード毎に表示画像を変える
-
曜日と時間を指定して表示画像...
-
JAVAスクリプトの質問
-
画像の切り替えの方法について
-
キャッシュされた画像を使わず...
-
-UWSC:IEで自動クリック-
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
JavaScript スライドの画像にリ...
-
bxsliderにて読み込み後に内容...
-
透過pngの透明部分以外をクリッ...
-
JavaScriptとチェックボックス...
-
クリッカブルマップの一部分だ...
-
innerHTMLで、表示すると、一部...
-
Javascriptで指定した日付と時...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックすると複数...
-
WEBページ立ち上げ時に1回のみ...
-
image.onload = .. の後に imag...
-
美人時計風JAVAスクリプトが上...
-
曜日と時間を指定して表示画像...
-
決まった曜日で一定時間だけ表...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
特定の画像を非表示にする方法
-
iframe内のリンク文字のマウス...
おすすめ情報