<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 ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css"> <div class="container"> <div class="row"> <h2 class="main-heading wow lightSpeedIn" data-wow-duration="1s">Bootstrap with animate css (animate div, text and image)</h2> </div> </div> <section class="main"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="img-box wow bounceInUp center" data-wow-duration="2s" data-wow-delay="0s"> <img src="http://sifatit.com/wp-content/uploads/2012/07/dummy.jpg"> </div> </div> <div class="col-md-6"> <div class="text-block wow bounceInDown center" data-wow-duration="4s"> <h2>The usefulness of nonsensical content</h2> <p>Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content. This is required when, for example, the final text is not yet available. Dummy text is also known as 'fill text'. It is said that song composers of the past used dummy texts as lyrics when writing melodies in order to have a 'ready-made' text to sing with the melody. Dummy texts have been in use by typesetters since the 16th century.</p> </div> </div> </div> </div> </section> <section class="main bg-t"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="img-box wow bounceInUp" data-wow-duration="2s" data-wow-delay="0s"> <img src="http://sifatit.com/wp-content/uploads/2012/07/dummy.jpg"> </div> </div> <div class="col-md-4"> <div class="img-box wow bounceInLeft" data-wow-duration="4s"> <img src="http://sifatit.com/wp-content/uploads/2012/07/dummy.jpg"> </div> </div> <div class="col-md-4"> <div class="img-box wow bounceInRight" data-wow-duration="4s"> <img src="http://sifatit.com/wp-content/uploads/2012/07/dummy.jpg"> </div> </div> </div> </div> </section> <section class="main"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="text-block wow fadeInUp" data-wow-duration="2s"> <h2>The usefulness of nonsensical content</h2> <p>Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content. This is required when, for example, the final text is not yet available. Dummy text is also known as 'fill text'. It is said that song composers of the past used dummy texts as lyrics when writing melodies in order to have a 'ready-made' text to sing with the melody. Dummy texts have been in use by typesetters since the 16th century.</p> </div> </div> <div class="col-md-6"> <div class="img-box wow bounceInUp center" data-wow-duration="4s"> <img src="http://sifatit.com/wp-content/uploads/2012/07/dummy.jpg"> </div> </div> </div> </div> </section>

body{background:url(https://www.adsyndicate.in/wp-content/uploads/2018/02/LP-bg-1.jpg);} .main-heading{width:100%; text-align:center; color:red; margin:60px;} .img-box img{width:100%;} .main{display:block; overflow:hidden;} .text-block{display:block; color:#fff;} .text-block h2{color:red;} .main{padding:100px 0; width:100%; overflow:hidden;} .main.bg-t{width:100%; background:rgba(255, 255, 255, 0.2); padding:120px 0;}

wow = new WOW( { animateClass: 'animated', offset: 100, callback: function(box) { console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") } } ); wow.init(); document.getElementById('moar').onclick = function() { var section = document.createElement('section'); section.className = 'section--purple wow fadeInDown'; this.parentNode.insertBefore(section, this); };