javascript - 滚动页面时为 div 设置动画

Question

我想在用户向下滚动页面时激活 3 个 div，我遵循了很多教程，但没有任何建议如何去做，因为 div 有一个定义的 css 类，这就是 div。我想让他们淡出或淡出或任何很酷的动画如何完成这个。请。

  <section  >
        <div class="container">
            <h1>   PRODUITS </h1>
                <div class="row">

                  <a href="pehdeauFrame.php">
                    <div id="mudivsho" class="col-md-4 col-sm-4">
                          <div class="panel panel-default">
                            <div  class="panel-body">
                             <h4 style="text-align:center;" class="adjst">Tubes PEHD pour Eaux </h4>
                           <img id="imgeaudiv" src="assets/images/diveau.jpg">
                          </div>
                          </div>    
                    </div>

                 </a>

                   <a href="pehdTelecomFrame.php">
                   <div id="mudivsho" class="col-md-4 col-sm-4">
                          <div class="panel panel-default">
                        <div  class="panel-body">
                             <h4 style="text-align:center;" class="adjst">PEHD pour gaine Fibre Optique</h4>
                           <img id="imgeaudiv" src="assets/images/divtelecom.jpg">
                        </div>
                    </div>     
                    </div>
                   </a>

                    <a href="http://www.mansouriplast.com/">
                   <div id="mudivsho" class="col-md-4 col-sm-4">
                          <div class="panel panel-default">
                        <div  class="panel-body">
                             <h4 style="text-align:center;" class="adjst">Tubes PVC</h4>
                            <img id="imgeaudiv" src="assets/images/divpvc.jpg">
                        </div>
                    </div>       
                    </div>
                  </a>

                </div>

        </div>
    </section>

Answer 1

我想你可以在这个网站上找到制作方法: https://css-tricks.com/aos-css-driven-scroll-animation-library/