ページのローディングアニメーション後にページ内のスライドインアニメーションを実行するようにしたい

サイトを制作中にfadeThisというライブラリを使用し
要素のスライドやフェードインできるようにしているのですが、
ページローディングアニメーション後に画面内にすでに収まっている要素が
ローディング表示時点でスライドインが実行され
ローディング終了時にはすでに画面に出てきてる状態になってしまいます。

これをローディング画面が終わってページが表示されてからスライドインが実行されるようにするには
どのようにしたらいいか悩んでいます。どなたかアドバイスいただけると嬉しいです。

テスト用に参考ページをアップしました。
http://o-sam.com/loadercheck/loader.html

ページの内容は以下になります。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <title>フェードインのアニメーションをページローディング後に再生されるようにしたい</title>
    
    <style>
    #loader-bg {
        text-align:center;
        display: none;
        color:#ffffff;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: #333333;
        z-index: 10000;
        overflow:hidden;
    }
    #loader {
        font-size:10px;
        width:100%;
        height:100%;
        text-align:center;
        display: none;
        color: #ffffff;
        z-index: 20000;
        margin:auto;
    }
    #loader img{
        text-align:center;
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    </style>
    
</head>

<body>
    <!---LOADER-->
    <div id="loader-bg">
        <div id="loader">
            <img src="img/three-dots.svg" width="60" height="60" alt="Now Loading..." />
            
        </div>
    </div>
    <!---LOADER END-->
    <div id="wrap">
        <!---LOADER-WRAPPER-->
       

        <div class="container-fluid mt-5">
                <div class="row mt-5">
                    <div class="slide-top mb-5 mt-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                        <div class=" pt-1 pb-1">
                            <h3><b>最初の画面内の要素はスライドインの予定がローダーが表示されている間にスライドインされてしまっている</b></h3>
                        </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                        <div class=" pt-1 pb-1">
                            <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                        </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                        <div class=" pt-1 pb-1">
                            <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                        </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                    <div class=" pt-1 pb-1">
                        <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                    </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                    <div class=" pt-1 pb-1">
                        <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                    </div>

                    </div>
                    <div class="slide-top mb-5"><img class="img-fluid w-100" src="img/loadertestimg.jpg" alt="">
                    <div class=" pt-1 pb-1">
                        <h3><b>これらすべてを<br>ページローディング後に再生されるようにしたい</b></h3>
                    </div>

                    </div>


                </div>
        </div>
  
        

        <!---JAVASCRIPT LOAD-->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(function() {
                var h = $(window).height();
                $('#wrap').css('display','none');
                $('#loader-bg ,#loader').height(h).css('display','block');
            });

            $(window).load(function () { //全ての読み込みが完了したら実行
                $('#loader-bg').delay(900).fadeOut(800);
                $('#loader').delay(600).fadeOut(300);
                $('#wrap').css('display', 'block');
            });

            //10秒たったら強制的にロード画面を非表示
            $(function(){
                setTimeout('stopload()',10000);
            });

            function stopload(){
                $('#wrap').css('display','block');
                $('#loader-bg').delay(900).fadeOut(800);
                $('#loader').delay(600).fadeOut(300);
            }
    
            
        </script>
       
  
        <script type="text/javascript" src="js/jquery.fadethis.min.js"></script>
        
        <script type="text/javascript">
            $(window).fadeThis();
        </script>
     
    </div>
    <!---LOADINGWRAPER-->
</body>

</html>

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

回答1件

ベストアンサー

こんな感じでよいのでしょうか？

修正しました。

HTML
1        <!---JAVASCRIPT LOAD-->
2        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
3        <script type="text/javascript" src="js/jquery.fadethis.min.js"></script>
4        <script>
5            $(function() {
6                var h = $(window).height();
7                $('#wrap').css('display','none');
8                $('#loader-bg ,#loader').height(h).css('display','block');
9
10                $(window).load(function () { //全ての読み込みが完了したら実行
11                    $('.container-fluid').hide();
12
13                    $('#loader-bg').delay(900).fadeOut(800);
14                    $('#loader').delay(600).fadeOut(300);
15                    $('#wrap').css('display', 'block');
16
17                    setTimeout(function() {
18                        $('.container-fluid').show();
19                        $(window).fadeThis();
20                    }, 900 + 800 + 500);
21                });
22
23                //10秒たったら強制的にロード画面を非表示
24                setTimeout(stopload, 10000);
25                function stopload() {
26                    $('#wrap').css('display','block');
27                    $('#loader-bg').delay(900).fadeOut(800);
28                    $('#loader').delay(600).fadeOut(300);
29                }
30            });
31        </script>

投稿2019/10/10 19:55

編集2019/10/12 08:06

naomi3

総合スコア1105

owowowsam

2019/10/10 21:46

ありがとうございます！　ただ使用しているクラスはslide-topの他にもあり、slide-topのものもあまり変わりませんでした。以下に更新したものもアップいたしました。 http://o-sam.com/loadercheck/loader2.html

owowowsam

2019/10/12 17:35

修正ありがとうございます。テストのページではうまく動いたのですが、制作中のサイトではなぜかスライドのアニメーションがされず突然表示されてしまいます。タイマー以外に方法はないものでしょうか。

owowowsam

2019/10/12 17:36

http://o-sam.com/loadercheck/loader3.html

naomi3

2019/10/12 18:35

http://o-sam.com/loadercheck/loader3.html ではfade-thisのデモページのように動いているようですが、完成イメージはどのようなお考えでしょうか？

naomi3

2019/10/12 18:38

https://gimmicklog.com/demo/fadethis/fadethis.html

owowowsam

2019/10/14 10:00

実際のサイトに使用した場合の現状はこちらにページを作りました。 http://edicavn.com/test/ 本番のサイトに入れた場合何故だかスライドするはずの要素がスライドとフェードインせずに消えている状態から瞬時に表示されてしまいます。 ``` <script type="text/javascript"> $(function() { var h = $(window).height(); $('#wrap').css('display','none'); $('#loader-bg ,#loader').height(h).css('display','block'); $(window).load(function () { //全ての読み込みが完了したら実行 $('.container-fluid').hide(); $('.container').hide(); $('#top').hide(); $('#loader-bg').delay(900).fadeOut(800); $('#loader').delay(600).fadeOut(300); $('#wrap').css('display', 'block'); setTimeout(function() { $('.container-fluid').show(); $('.container').show(); $('#top').show(); $(window).fadeThis(); }, 900 + 800 + 500); }); //10秒たったら強制的にロード画面を非表示 setTimeout(stopload, 10000); function stopload() { $('#wrap').css('display','block'); $('#loader-bg').delay(900).fadeOut(800); $('#loader').delay(600).fadeOut(300); } }); </script> ```

naomi3

2019/10/15 12:40

$(window).fadeThis();　が最後にあります。 setTimeout(function() {の中にそれがない限り、ＨＴＭＬロード直後にfadeThisが始まってしまいます。

naomi3

2019/10/15 12:44

最後の$(window).fadeThis();を消してください。

owowowsam

2019/10/15 13:51

ありがとうございます！確かに最後に余計に入れていました。それを取ったら問題なく動きました。あとはタイマーの時間を調節しながらやってみます。助かりました、ありがとうございました。

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