Q&A
前の質問で指摘があったように一般的には「フェードイン」「フェードアウト」と思います。
https://teratail.com/questions/209716
用語は正しく使われないと伝わるものも伝わらないので自ら作ったような言葉ではなく正確に表現願います（質問調整願います）
あと、実際のコードがないことにはどこをどう対策すべきかアドバイスできませんので、コードも追記願います。
jQueryで、サイトの読み込み時に全画面でフェードインする様なページを作成したのですが、フェードダウンが終わった際、ページの先頭が表示されるのではなく、途中から表示されるのですが、何か対策することはできるのでしょうか？
パソコンでのこの問題は発見していませんが、新規にスマートフォンで読み込んだ際に起こります。
しかし、ページを更新すると、正常に表示されます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<!-- headは省略させていただきます。 --> 4<body> 5 6 <h1>見出し<h1> 7 <h3>サブタイトル</h3> 8 <h3><strong>21-22</strong></h3> 9 10 <!-- <iframe width="100%" height="215" src="https://www.youtube.com/embed/v9Ah7AvQ-W0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --> 11 12 </center> 13 <br><h2 class="title01">サブタイトル</h2> 14 <P>ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。/P> 15 <br><h2 class="title01">サブタイトル</h2> 16 <p>ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</p> 17 <br><h2 class="title01">サブタイトル</h2> 18 <p>ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</p> 19 <br><h2 class="title01">このサイトについて</h2> 20 <p>ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。 21 <footer class="bottom"><p>©Programming</p></footer> 22 23 <div class="start"><p style="margin-bottom: 1em;"><img src="slice_13.png" alt="ロゴ画像" class="img_logo"></p></div> 24 25 26 27<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 28<script> 29 $(function() { 30 setTimeout(function(){ 31 $('.start p').fadeIn(1900); 32 },990); //0.5秒後にロゴをフェードイン! 33 setTimeout(function(){ 34 $('.start').fadeOut(500); 35 },3500); //2.5秒後にロゴ含め真っ白背景をフェードアウト！ 36 }); 37</script> 38<!--css--> 39<style type="text/css"> 40 body { 41 margin-top: 50px; 42 margin-left: 0px; 43 margin-right: 0px; 44 } 45 46 .img_logo{ 47 max-width: 100%; 48 height: 0 auto; 49 width: 0 auto; 50 text-align: center; 51 } 52 53 .body { 54 margin-top: 50px; 55 margin-left: 0px; 56 margin-right: 0px; 57 } 58 59 .btn { 60 background: #3f3f3f; 61 padding: 20px; 62 font-size: 14px; 63 } 64 65 .btn1 { 66 text-decoration: none; 67 padding: 5px; 68 color: white; 69 } 70 71 .bottom { 72 text-align: center; 73 color: gray; 74 } 75 76 .start { 77 background: #FFF; 78 position: fixed; 79 top: 0; 80 left: 0; 81 height: 100%; 82 width: 100%; 83 z-index: 9000; 84 } 85 86 .start p { 87 position: fixed; 88 left: 50%; 89 top: 50%; 90 transform: translate(-50%, -50%); 91 display: none; 92 z-index: 9999; 93 width: 280px; 94 } 95 96 h2 { 97 padding: 0.4em 0.5em;/*文字の上下 左右の余白*/ 98 color: #494949;/*文字色*/ 99 background: #f4f4f4;/*背景色*/ 100 border-left: solid 5px #7db4e6;/*左線*/ 101 border-bottom: solid 3px #d7d7d7;/*下線*/ 102 } 103 104</style> 105</body> 106</html>
コードは.jQueryのコードだけでも大丈夫でしょうか？
いえhtmlに対して行われるのでhtmlも必要です。いずれも現象が再現する最小構成のものでも構いません。
内容的な部分は控えさせていただきます。
内容を一部消した際に、タグが消えていないか確認しましたが、問題があった場合はお知らせください。
「途中から表示される」というのは、ページが一部スクロールされた状態で現れるということでしょうか？
はい、その通りです。
回答1件
0
ベストアンサー
画像と背景がフェイドアウトして消えるまでの間にスクロールを禁止していないため、スワイプの操作が行われた際、ページがスクロールされます。
そのため、その間に、スクロールを停止させておく処理を入れておく必要があります。
jQuery
1<script> 2$(function() { 3 // スクロールを停止 4 $('body').addClass('fixed').css({'top': 0}); 5 6 setTimeout(function(){ 7 $('.start p').fadeIn(1900); 8 },990); //0.5秒後にロゴをフェードイン! 9 10 setTimeout(function(){ 11 $('.start').fadeOut(500); 12 //スクロール停止を解除 13 $('body').removeClass('fixed'); 14 },3500); //2.5秒後にロゴ含め真っ白背景をフェードアウト！ 15}); 16</script>
CSS
1body.fixed { 2 position: fixed; 3 width: 100%; 4 height: 100%; 5 left: 0; 6}
おそらくこの方法で先頭から表示されるようになるかと思います。
試してみてください。
この場合はCSSを追加する方法を使っていますが、JavaScriptのみで停止する方法など、状況によっては違うやり方のほうが適当な場合もあるかと思います。いろいろ調べてみてより良い方法を見つけ出してください。
投稿2019/09/04 18:15
総合スコア250
無事にスクロールの禁止をする事ができました。
jQuery内でのコードが難しく理解できない部分がありましたが、一つずつ自分のものにしていきたいです。
追記） 質問でも書かせていただきましたが、jQueryの読み込みの前に、html/cssなどが読み込まれ中身が見れてしまうのですが、それはどのように対策すればいいのでしょうか？
該当の質問がどれだったかわからなかったのですが、もし、一瞬中身が見られるという現象であれば、フェイドさせる .start の部分のhtmlとCSSを最初の方に書くなどして、処理を優先させれば良いような気がします。
あなたの回答
tips
プレビュー
