如何一张一张地制作 Bootstrap 4 卡的动画？

Question

我需要帮助在 Bootstrap 4 中制作卡片动画。

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

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

我不想制作滑块/旋转木马。

作为参考，请检查此codepen

4个盒子每个需要来自右边。在 codepen 中，以上所有内容都是从左侧立即出现的。当用户滚动到该部分时，我需要从右侧逐一获取它。

这是我正在使用的 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 -->

Answer 1

您尝试过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>