javascript - 如何一张一张地给Bootstrap 4卡制作动画？

我需要帮助来引导引导程序4中的卡片动画。

我有4个卡盒，如下图所示，这是一个简单的带有4个卡盒的Bootstrap 4卡座。



每当用户滚动到此部分时，我都会尝试从右开始一个一个地滑动每个框。如何实现呢？

我不是要制作滑块/转盘。

作为参考，请检查此codepen

每个需要4个盒子。
在代码库中，所有这些立即全部来自左侧。
当用户滚动到该部分时，我需要一个接一个地从右开始。

这是我正在使用的boostrap 4卡的代码

       <!-- Card Row starts here -->
   <div class="card-deck ">
      <div class="card card-detail card-text1">
         <img class="card-img-top img-fluid" src="images/Analytics.png" alt="Card image cap">
         <div class="card-body">
            <h5 class="card-title text-center">Analytics</h5>
            <p class="card-text text-center text-justify ">Our amazing tracking platform allows you to view in-depth analytics for your traffic as well as our dashboard provides proprietary reporting with actionable statistics to analyze and optimize your results in real-time. Every click gets counted.</p>
         </div>
      </div>
      <div class="card card-detail card-text1 ">
         <img class="card-img-top img-fluid" src="images/Offer-Well.png" alt="Card image cap">
         <div class="card-body">
            <h5 class="card-title text-center">Offer Well</h5>
            <p class="card-text text-center text-justify">Our OfferWall gives your users the most options to earn in one location. You can deploy a complete rewards-based monetization solution on your site in minutes as it's quite easy and simple.</p>
         </div>
      </div>
      <div class="card card-detail card-text1 ">
         <img class="card-img-top img-fluid" src="images/Inventory.png" alt="Card image cap">
         <div class="card-body">
            <h5 class="card-title text-center">Inventory</h5>
            <p class="card-text text-center text-justify ">With over 2,000 active campaigns in our system, our algorithms will find the best converting ones for your placement. Your users have the power to easily earn by watching videos, downloading apps, taking short surveys, and completing other quick offers. </p>
         </div>
      </div>
      <div class="card card-detail card-text1">
         <img class="card-img-top img-fluid" src="images/Support.png" alt="Card image cap">
         <div class="card-body">
            <h5 class="card-title text-center">Support</h5>
            <p class="card-text text-center text-justify">Each publisher is assigned a dedicated account manager that can help you with integration as well as in every aspects. Moreover, your user can contact us if they're running with issues.</p>
         </div>
      </div>
   </div>
   <!-- Card Row Ends here -->

最佳答案

您是否尝试过此插件aosjs？要设置动画，只需将特定元素与有效的aos属性绑定（请参阅下文）

<div data-aos="fade-up"></div>

如果要对其设置动画一次，则可以添加data-aos-once属性

<div data-aos="fade-up" data-aos-once="true"></div>

依此类推，请在此处查看插件http://michalsnik.github.io/aos/

更新：要使每个元素在不同的持续时间上显示，您可以添加data-aos-delay

<div id="animate1" data-aos="fade-up" data-aos-once="true" data-aos-delay="500"></div>
<div id="animate2" data-aos="fade-up" data-aos-once="true" data-aos-delay="1000"></div>
<div id="animate3" data-aos="fade-up" data-aos-once="true" data-aos-delay="1500"></div>

从上面的示例可以看出，每个元素都有500ms的延迟。

注意：请确保您首先初始化插件

<script>
    AOS.init();
</script>