jqueryを使ったloading画面の実装と，スクロールに応じてフェードインさせるプラグインの競合？について

前提・実現したいこと

スクロール上下に伴って，いくつかの要素がそれぞれ可視範囲に入るとフェードイン／可視範囲外であればフェードアウトするように実装できないかといろいろと調べたところ，ScrollReveal（１）というスクリプトが思っていた形に近いので使ってみたのですが，思うように実装されません．
ローディング画面を実装するために記述したスクリプトと競合しているような気がするのですが，改善方法がわかりません．

（１）https://scrollrevealjs.org/

発生している問題・エラーメッセージ

動作を確認すると，フェードインさせたい要素（<main>）が表示されず真っ白な状態になります．
しかし，chrome上で「検証」をしたり，ブラウザのサイズを変えたりすると，表示されます．
改善方法がわからず悩んでいます．

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Megrim|Cinzel+Decorative&display=swap');
    svg {
      display: block;
      width: 50vw;
      height: 50vh;
      mix-blend-mode: difference;
      font-family: Megrim, Century Gothic;}

    body {
      height: 100vh;
      margin: 0 auto;
      }

    section {
      overflow: hidden;
      display: grid;
      place-content: center;
      height: 100vh;
      margin: auto;}

    .loading:before {
      content: '';
      display: block;
      width: 100vw;
      height: 100vh;
      position: absolute;
      z-index: -1;
      background: center center / cover url(hero.jpg);
      -webkit-filter: brightness(0.35);
              filter: brightness(0.35);}

    .main {
      width: 100vw;
      height: 100vh;
      position: absolute;
      background-color: #ffffff;
      font-family: 'Cinzel Decorative', cursive;
      z-index: 1;}

    #hero { text-align: center;}
    #info {
      text-align: left;
    }

    </style>

</head>
<body>
  <section class="loading">
  </section>

  <main class="main">
  <section id="hero">
    <div id="b1">
    <h2>Section1</h2>
    </div>
  </section>

  <section id="info">
  <div id="b2">
    <div>
	<h2>Section2</h2>
    </div>
  </div>

  </section>

  <section id="title">
  <div id="b3">
    <div>
	<h2>Section3</h2>
   </div>
  </div>

  </section>

  </main>




<script src="https://unpkg.com/scrollreveal"></script>
<script>
window.sr = ScrollReveal({ reset: true });

var opt_sr1 = {
    scale: 1,
    distance: 0,
    opacity: 0,
    duration: 500,
    delay: 500
};

sr.reveal('#b1', opt_sr1);
sr.reveal('#b2', opt_sr1);
sr.reveal('#b3', opt_sr1);
</script>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
var $d = jQuery.noConflict();

$d(function() {
    var h = $d(window).height();
    $d('.main').css('display','none');
});

setTimeout(function(){
    $d('.loading').delay(1200).fadeOut(1000);
},1000);
setTimeout(function(){
    $d('.main').delay(1000).fadeIn(500);
},2000);
</script>
</body>
</html>

試したこと

・ScrollRevealのみであれば，正常に動作しました

・仮に，#b1のみ，最初から表示させるように，

<script>
window.sr = ScrollReveal({ reset: true });

var opt_sr1 = {
    scale: 1,
    distance: 0,
    opacity: 0,
    duration: 500,
    delay: 500
};

sr.reveal('#b2', opt_sr1);
sr.reveal('#b3', opt_sr1);
</script>

というようにしても，改善されませんでした

行動規範の内容に同意します

回答1件

ベストアンサー

動的に要素のサイズを変えているのでScrollRevealでスクロールの位置が正しく計算できていないのだと思います。
現状ウインドウがリサイズされた場合にScrollRevealの再計算が行われ、正しく表示されています。
下記のように、メイン要素を表示後、明示的にScrollRevealの再計算をさせることで解決するのではないかと思います。

javascript
1setTimeout(function(){
2    $d('.main').delay(1000).fadeIn(500, function(){
3      ScrollReveal().sync();
4    });
5},2000);

投稿2019/06/24 02:57

webgoto

総合スコア1293

nerune

2019/06/24 06:00

思い通りの動きになりました．ありがとうございます．

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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