How to Make Scroll Animation with HTML ,CSS and JS

Hi Everyone

I will represent how to make Scroll Animation

Code HTML & JS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TechScroll</title>
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto%7CJosefin+Sans:100,300,400,500" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">TechScroll</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#showcase">Home</a></li>
            <li><a href="#info1">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <section id="showcase">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-sm-6">
            <div class="showcase-left">
              <img src="img/image1.jpg">
            </div>
          </div>
          <div class="col-md-6 col-sm-6">
            <div class="showcase-right">
              <h1>Hands-free help from the Google Assistant</h1>
              <p>Google Home voice-activated speaker.consectetur 
                adipisicing elit, sed do eiusmod tempor incididunt 
                ut labore et dolore magna aliqua. Ut enim ad minim 
                veniam, quis nostrud exercitation ullamco laboris 
                nisi ut aliquip ex ea commodo consequat
              </p>
            </div>
            <br>
            <a class="btn btn-default btn-lg showcase-btn">Read More</a>
          </div>
        </div>
      </div>
    </section>

    <section id="testimonial">
      <div class="container">
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ut labore et 
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud"
        </p>
        <p class="customer">- John Doe</p>
      </div>
    </section>

    <section id="info1">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-sm-6">
            <div class="info-left">
              <img src="img/image2.png">
            </div>
          </div>
          <div class="col-md-6 col-sm-6">
            <div class="info-right">
              <h2>Get To Know Google Home</h2>
              <p>Adipisicing elit, sed do eiusmod tempor incididunt ut 
                labore et dolore magna aliqua. Ut enim ad minim veniam, 
                quis nostrud exercitation ullamco laboris nisi ut aliquip 
                ex ea commodo consequat
              </p>
              <br>
              <a class="btn btn-default btn-lg">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <hr>
    <section id="info2">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-sm-6">
            <div class="info-left">
              <h2>Info Block One</h2>
              <p>Adipisicing elit, sed do eiusmod tempor incididunt ut 
                labore et dolore magna aliqua. Ut enim ad minim veniam, 
                quis nostrud exercitation ullamco laboris nisi ut aliquip 
                ex ea commodo consequat
              </p>
            </div>
          </div>
          <div class="col-md-6 col-sm-6">
            <div class="info-right">
              <h2>Info Block Two</h2>
              <p>Adipisicing elit, sed do eiusmod tempor incididunt ut 
                labore et dolore magna aliqua. Ut enim ad minim veniam, 
                quis nostrud exercitation ullamco laboris nisi ut aliquip 
                ex ea commodo consequat
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="contact">
      <div class="container">
        <div class="row">
          <div class="col-md-5 col-sm-5">
            <form>
              <div class="form-group">
                <label>Name: </label>
                <input class="form-control" type="text" name="" value="" placeholder="Enter Name">
              </div>
              <div class="form-group">
                <label>Email: </label>
                <input class="form-control" type="text" name="" value="" placeholder="Enter Email">
              </div>
              <div class="form-group">
                <label>Message: </label>
                <textarea class="form-control" name="" value="" placeholder="Enter Message"></textarea>
              </div>
              <button class="btn btn-default">Submit</button>
            </form>
          </div>
          <div class="col-md-7 col-sm-7">

          </div>
        </div>
      </div>
    </section>

    <footer>
      <p class="text-center">TechScroll Copyright &copy; 2018</p>
    </footer>

    <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        window.sr = ScrollReveal();
        sr.reveal('.navbar', {
          duration: 2000,
          origin:'bottom'
        });
        sr.reveal('.showcase-left', {
          duration: 2000,
          origin:'top',
          distance:'300px'
        });
        sr.reveal('.showcase-right', {
          duration: 2000,
          origin:'right',
          distance:'300px'
        });
        sr.reveal('.showcase-btn', {
          duration: 2000,
          delay: 2000,
          origin:'bottom'
        });
        sr.reveal('#testimonial div', {
          duration: 2000,
          origin:'bottom'
        });
        sr.reveal('.info-left', {
          duration: 2000,
          origin:'left',
          distance:'300px',
          viewFactor: 0.2
        });
        sr.reveal('.info-right', {
          duration: 2000,
          origin:'right',
          distance:'300px',
          viewFactor: 0.2
        });
    </script>

    <script>
    $(function() {
      $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
    </script>
  </body>
</html>

Code CSS

body{
  margin-top:70px;
  font-size:16px;
}

h1,h2,h3,h4,h5,h6{
  font-family:Poppins;
}

p{
  font-family:Roboto;
}

.navbar-default{
  background:#fff;
  border:0;
  font-family:Poppins;
}

.navbar-brand{
  font-size:20px;
  color:#000 !important;
  font-weight:bold;
}

#showcase h1{
  font-size:50px;
  margin-bottom:20px;
}

#showcase img{
  width:90%;
  margin-left:60px;
}

#showcase .showcase-right{
  margin-top:90px;
}

#testimonial{
  background:#f1f1f1;
  padding: 50px 0 30px 0;
  text-align:center;
  margin-top:40px;
}

#testimonial p{
  font-size:32px;
  font-family: 'Josefin Sans';
  color:#000;
}

#testimonial p.customer{
  font-size:20px;
  color:#666;
}

#info1 .info-right{
  margin-top:90px;
}

#info2{
  margin:20px 0 60px 0;
}

#contact{
  background:url(../img/image3.png);
  padding:40px;
  color:#fff;
  border-top:#333 7px solid;
  border-bottom:#333 7px solid;
}

footer{
  padding:30px;
}