Как оживить Bootstrap 4 карты по одной?

Question

Мне нужна помощь для анимации карт в начальной загрузке 4.

У меня есть 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 -->

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>

как видно из приведенного выше примера, каждый элемент имеет задержку 500 мс.

Примечание: убедитесь, что вы сначала инициализируете плагин

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

Answer 2

Отредактировано - после изменений в деталях вопроса

В соответствии с предложением @ Juliver Galleto вы можете использовать плагин aosjs

https://github.com/michalsnik/aos

Ниже приведен фрагмент моего кода

AOS.init({
  duration: 1200,
})

* {
  box-sizing: border-box;
}

.item {
  width: 100px;
  height: 200px;
  margin: 50px auto;
  padding-top: 75px;
  background: #ccc;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}

   

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

    <head>
      <meta charset="UTF-8">
      <title>AOS - animations</title>
      
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

      <link rel='stylesheet prefetch' href='https://unpkg.com/aos@2.3.0/dist/aos.css'>

          <link rel="stylesheet" href="css/style.css">

      
    </head>

    <body>


    <div style="width=1200px;">
    <div style="float:left;" data-aos-delay="100" class="item" data-aos="fade-left">1</div>
    <div  style="float:left;" data-aos-delay="1600" class="item" data-aos="fade-left">2</div>
    <div  style="float:left;" data-aos-delay="2800" class="item" data-aos="fade-left">3</div>
    </div>
      <script src='https://unpkg.com/aos@2.3.0/dist/aos.js'></script>

</body>

</html>

Старый пост

Эта функция доступна в начальной загрузке как карусель

Пример: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel

О Карусель : https://getbootstrap.com/docs/4.0/components/carousel/