質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1680閲覧

【jQuery】スプラッシュ画面→メインコンテンツ(コンテンツフェードイン)アニメーションが発火しない

nemonote

総合スコア2

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/09/25 09:19

前提・実現したいこと

表題の通り、初回アクセス時にはスプラッシュ画面を表示→フェードアウトで消えた後にコンテンツがフェードインする、という挙動を実装したい。(スクロールフェードイン※最初から領域に表示されているものはフェードイン)

発生している問題

各々の挙動実装は問題なく動くのですが、
スプラッシュ画面からフェードアウト後のコンテンツフェードインのみ挙動しません。
log等で確認した結果、どうやら初回アクセス時のみ要素の位置が取得できていない、というところまではわかりました。2度目以降のアクセス時のコンテンツフェードイン/マスクスライドなどは問題なく挙動しています。

該当のソースコード

jQuery

1var a = function splashFadein(splashFadeout) { 2 $("body").css("overflow", "hidden"); 3 $(".splashScreen_animatedFirst").fadeIn(2000); 4 $(".splashScreen_animatedSecond").fadeIn(2000); 5}; 6 7var b = function splashFadeout() { 8 $("body").css("overflow", "scroll"); 9 $(".splashScreen").fadeOut(2000); 10 $(".splashScreen_animatedFirst").fadeOut(2000); 11 $(".splashScreen_animatedSecond").fadeOut(2000); 12}; 13 14var c = function maskSlide() { 15 var effectPos = 0; 16 $(window).on("load scroll", function () { 17 var scrollTop = $(this).scrollTop(); 18 var scrollBtm = scrollTop + $(this).height(); 19 effectPos = scrollBtm - effectPos; 20 $(".maskslide").each(function () { 21 var thisPos = $(this).offset().top; 22 if (effectPos > thisPos) { 23 $(this).addClass("slidein"); 24 } 25 }); 26 }); 27}; 28 29var d = function fadeIn() { 30 $(window).on("load scroll", function () { 31 $(".fadein").each(function () { 32 var elemPos = $(this).offset().top; 33 var scroll = $(window).scrollTop(); 34 var windowHeight = $(window).height(); 35 if (scroll > elemPos - windowHeight + 50) { 36 $(this).addClass("scrollin"); 37 } 38 }); 39 }); 40}; 41 42$(function () { 43 //Cookie処理 44 if ($.cookie("access") == undefined) { 45 $.cookie("access", "onece"); 46 a(); 47 setTimeout(b, 2500); 48 setTimeout(c, 4500); 49 setTimeout(d, 4500); 50 } else { 51 $(".splashScreen").css("display", "none"); 52 c(); 53 d(); 54 } 55}); 56

試したこと

Promiseなども使用してみたのですが、同じような挙動になり、
理想の挙動が実装できませんでした。
恐らく

$(window).on("load scroll")

このあたりの指示が関係しているのかと思っているのですが…。
にっちもさっちもいかない状態です。

解決策のアドバイスをいただければ幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/09/25 09:31

想定する挙動に近いサイトはありませんか?
nemonote

2020/09/25 09:42

https://chikuha.co.jp/ こちらが想定する挙動に近いサイトになります。 (初回はスプラッシュ画面表示→コンテンツ表示。二回目以降はコンテンツ表示のみ) ご確認よろしくお願いいたします。
guest

回答2

0

自己解決

表示させる側の挙動をスクロールした時&読み込み時で動作を分けたところ、
思ったような挙動にすることができました。
お答えいただいた方、助言ありがとうございました。

投稿2020/09/25 10:44

nemonote

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

2回目が成功するということは、1回目の際にz-indexでローディング画面を
ダミーでだしておいて、裏で描画すればよいのでは?

投稿2020/09/25 09:34

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/09/25 09:53

初回だけ見せるのであれば作業終了時にクッキーにフラグを保持し フラグのありなしで初回画面をみせるかどうか決めればよいでしょう
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問