"wow animation when you scroll "
Bootstrap 4.1.1 Snippet by Shivamsemisetia

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" /> <section class="banner_bottom"> <div class="container-fluid"> <div class="ban_b_img_1 wow zoomIn"> <img src="images/p2.png" class="img-fluid" alt="" /> </div> <div class="ban_b_img_2 wow zoomIn"> <img src="images/ban_b_2.png" class="img-fluid" alt="" /> </div> <div class="row align-items-center"> <div class="col-lg-4"> <div class="ban_b_bx"> <div class="ban_b_img wow zoomIn"> <img src="images/ban_b_1.png" class="img-fluid" alt="" /> </div> </div> </div> <div class="col-lg-3"> <div class="ban_b_bx wow zoomIn"> <div class="ban_b_cn"> <h2>Daily fresh and always tasty</h2> <p>Lorem Ipsum is simply dummy text of the and typesetting industry.</p> <a href="#" class="common-btn">Order Now</a> </div> </div> </div> </div> </div> </section> <section class="banner_bottom"> <div class="container-fluid"> <div class="ban_b_img_1 wow zoomIn"> <img src="images/p2.png" class="img-fluid" alt="" /> </div> <div class="ban_b_img_2 wow zoomIn"> <img src="images/ban_b_2.png" class="img-fluid" alt="" /> </div> <div class="row align-items-center"> <div class="col-lg-4"> <div class="ban_b_bx"> <div class="ban_b_img wow zoomIn"> <img src="images/ban_b_1.png" class="img-fluid" alt="" /> </div> </div> </div> <div class="col-lg-3"> <div class="ban_b_bx wow zoomIn"> <div class="ban_b_cn"> <h2>Daily fresh and always tasty</h2> <p>Lorem Ipsum is simply dummy text of the and typesetting industry.</p> <a href="#" class="common-btn">Order Now</a> </div> </div> </div> </div> </div> </section> <section class="banner_bottom"> <div class="container-fluid"> <div class="ban_b_img_1 wow zoomIn"> <img src="images/p2.png" class="img-fluid" alt="" /> </div> <div class="ban_b_img_2 wow zoomIn"> <img src="images/ban_b_2.png" class="img-fluid" alt="" /> </div> <div class="row align-items-center"> <div class="col-lg-4"> <div class="ban_b_bx"> <div class="ban_b_img wow zoomIn"> <img src="images/ban_b_1.png" class="img-fluid" alt="" /> </div> </div> </div> <div class="col-lg-3"> <div class="ban_b_bx wow zoomIn"> <div class="ban_b_cn"> <h2>Daily fresh and always tasty</h2> <p>Lorem Ipsum is simply dummy text of the and typesetting industry.</p> <a href="#" class="common-btn">Order Now</a> </div> </div> </div> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <script> wow = new WOW( { animateClass: 'animated', offset: 200, callback: function (box) { console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") } } ); wow.init(); </script>

Related: See More


Questions / Comments: