<section class="container" id="reveal-container1">
  <h1 class="text-center">Hello World</h1>
  <p id="reveal-paragraph">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium repudiandae, corporis, eum rem amet sed dolores magnam odio architecto asperiores labore quidem, magni mollitia velit facere modi eos, consequatur voluptatem. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Error, sit. Incidunt iusto officia vero necessitatibus nihil, quis molestiae, nesciunt sapiente rerum enim unde odio, ducimus ratione voluptas nulla hic, asperiores. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Dolor excepturi, possimus id unde iure debitis, quae laborum, ducimus voluptas ipsum, illo magnam ipsa. Ipsum, voluptatum? Reiciendis natus ipsam sapiente corrupti?
  </p>
</section>

<hr>

<section id="reveal-container2">
  <img class="img-thumbnail" src="https://tctechcrunch2011.files.wordpress.com/2015/04/codecode.jpg?w=738">
</section>

<hr>

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6" id="info1">
        <h1>Info 1</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, consectetur sunt optio deleniti maiores praesentium labore totam asperiores molestias accusamus error suscipit ipsum sit expedita enim, ipsam a unde earum!
        </p>
      </div>
      <div class="col-md-6" id="info2">
          <h1>Info 2</h1>
          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, consectetur sunt optio deleniti maiores praesentium labore totam asperiores molestias accusamus error suscipit ipsum sit expedita enim, ipsam a unde earum!
          </p>
        </div>
    </div>
  </div>
</section>
/* Setting Scroll reveal as a global 
object in window */
window.sr = new ScrollReveal({
  reset:true // to repeat the effect
});

// First Section
sr.reveal("#reveal-container1",{
  origin:"left", // Place to start
  distance:"500px", // Distance to be moved
  duration:1200
})

// Paragraph
sr.reveal("#reveal-paragraph",{
  delay:1200 // To see this after the container gets revealed
  // Other values are used as default
})

// Second section
sr.reveal("#reveal-container2",{
  origin:"top",
  duration:1200,
  distance:"500px"
})

// First info box
sr.reveal("#info1",{
  origin:"left",
  duration:1200,
  distance:"150px"
})

// Second info box
sr.reveal("#info2",{
  origin:"right",
  duration:1200,
  distance:"150px"
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://unpkg.com/scrollreveal/dist/scrollreveal.min.js