chihung
5/7/2020 - 4:37 AM

waypoint and animate.css

$(document).ready(function(){
    $('#section-customer').waypoint({
        handler: function(direction) {
            $('#well-1').addClass('active');
            // $('#well-2').addClass('active');
            // $('#well-3').addClass('active');
            // $('#well-4').addClass('active');
            // $('#well-5').addClass('active');

            setTimeout(function(){
                $('#well-2').addClass('active');
            },510);

            setTimeout(function(){
                $('#well-3').addClass('active');
            },1010);

            setTimeout(function(){
                $('#well-4').addClass('active');
            },1510);

            setTimeout(function(){
                $('#well-5').addClass('active');
            },2010);
        },
        offset: '0'
    });


    $('#section-location').waypoint({
        handler: function(direction) {
            $('#well-section-location-1').addClass('animated fadeIn opacity-1');
            $('#well-section-location-2').addClass('animated fadeIn delay-1s');
            $('#well-section-location-3').addClass('animated fadeIn delay-2s');
            $('#well-section-location-4').addClass('animated fadeIn delay-3s');
        },
        offset: '75%'
    });


    $('#section-easy-introduction').waypoint({
        handler: function(direction) {
            $('#well-section-easy-introduction-1').addClass('animated fadeInDown opacity-1');
            $('#well-section-easy-introduction-2').addClass('animated fadeInDown delay-1s');
            $('#well-section-easy-introduction-3').addClass('animated fadeInDown delay-2s');
        },
        offset: '75%'
    });


    $('#section-easy-setting').waypoint({
        handler: function(direction) {
            $('#well-section-easy-setting-1').addClass('animated fadeInUp opacity-1');
            $('#well-section-easy-setting-2').addClass('animated fadeInUp delay-1s');
            $('#well-section-easy-setting-3').addClass('animated fadeInUp delay-2s');
            $('#img-lg-section-easy-setting').addClass('animated fadeInUp delay-3s');
        },
        offset: '85%'
    });


    $('#section-license').waypoint({
        handler: function(direction) {
            $('#well-section-license-1').addClass('animated fadeInDown opacity-1');
            $('#well-section-license-2').addClass('animated fadeInDown delay-1s');
        },
        offset: '85%'
    });
});
//----------------------------------------------
.opacity-0 {
  @include opacity (0);
}

//----------------------------------------------
.opacity-1 {
  @include opacity (1);
}
<section id="section-license" class="bg-gray section-license img-laptop-and-paper">
                <div class="container">
                    <h3 class="title-section title-border-bottom-orange">
                        50社・8,000ライセンスを超える導入実績!
                    </h3>

                    <div class="row row-20-lg">
                        <div class="col-sm-6">
                            <div id="well-section-license-1" class="well well-blank opacity-0" data-mh="well">
                                <img src="img/logo-tmj.png" alt="TMJ" class="logo center-block img-responsive"/>

                                <p class="lead">
                                    株式会社TMJ 様
                                    <small>
                                        BPOベンダ
                                    </small>
                                </p>

                                <h4 class="title-orange title-xs">
                                    対象
                                </h4>
                                コンタクトセンター業務

                                <h4 class="title-orange title-xs">
                                    解決策と導入効果
                                </h4>

                                <ul class="list-disc-orange-lg">
                                    <li>
                                        アノテーションの自動表示で入力ミスに対する注意喚起を徹底
                                    </li>
                                    <li>
                                        人的要因によるミス発生率を半分以下に減少(前年同期比)
                                    </li>
                                </ul>

                                <div class="container-btn">
                                    <a href="#" class="btn btn-text-with-arrow-right-gray">
                                        詳しくはこちら
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div id="well-section-license-2" class="well well-blank opacity-0" data-mh="well">
                                <img src="img/logo-hitachi.png" alt="日立金属商事株式会社" width="250" class="logo center-block img-responsive"/>

                                <p class="lead">
                                    日立金属商事株式会社 様
                                    <small>
                                        商社系
                                    </small>
                                </p>

                                <h4 class="title-orange title-xs">
                                    対象
                                </h4>
                                販売管理システム

                                <h4 class="title-orange title-xs">
                                    解決策と導入効果
                                </h4>

                                <ul class="list-disc-orange-lg">
                                    <li>
                                        複雑化していたマニュアルをシンプルなアノテーションに置き換え
                                    </li>
                                    <li>
                                        RPA導入後に残った20分/件の入力作業を7分/件まで短縮
                                    </li>
                                </ul>

                                <div class="container-btn">
                                    <a href="#" class="btn btn-text-with-arrow-right-gray">
                                        詳しくはこちら
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
https://github.com/daneden/animate.css
https://github.com/imakewebthings/waypoints/blob/master/licenses.txt