How to animate Bootstrap 4 cards one by one?

问题:

I need help to animate cards in bootstrap 4.

I have 4 card boxes as shown in image below, it's a simple bootstrap 4 cards deck with 4 card boxes.

I am trying to slide each boxes one by one from right whenever user scroll to this section. how to achieve it?

I am not trying to make slider/carousel.

For reference check this codepen

4 boxes each needs to come from right. In the codepen above all comes at once and from left. I need it from right and one by one, when user scrolls to the section.

here is the code of boostrap 4 cards i am using

       <!-- 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 -->

回答1:

Have you tried this plugin aosjs? To animate, you just need to bind the specific elements with the valid aos attributes (refer below)

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

if you want to animate it once then you can add data-aos-once attribute

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

and so on, check the plugin here http://michalsnik.github.io/aos/

Update: to make each of the element, shows on different duration, you can add 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>

as seen from above sample, each element has 500ms delay.

Note: make sure you initialize the plugin first

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

回答2:

Edited- After changes in question details

As suggested by @Juliver Galleto you can use plugin aosjs

https://github.com/michalsnik/aos

Below is my running code snippet

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>

Old Post

This feature is available in bootstrap as carousel

Sample:https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel

About carousel : https://getbootstrap.com/docs/4.0/components/carousel/