前提・実現したいこと
表題の通り、初回アクセス時にはスプラッシュ画面を表示→フェードアウトで消えた後にコンテンツがフェードインする、という挙動を実装したい。(スクロールフェードイン※最初から領域に表示されているものはフェードイン)
発生している問題
各々の挙動実装は問題なく動くのですが、
スプラッシュ画面からフェードアウト後のコンテンツフェードインのみ挙動しません。
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")
このあたりの指示が関係しているのかと思っているのですが…。
にっちもさっちもいかない状態です。
解決策のアドバイスをいただければ幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー