Simple Scroll Effect using JavaScript+JQuery.

Client Side JavaScript about 6 years ago || 7/4/2019 || 3.8 K View

Scroll animation:

Here are some steps to bring simple scroll effect for website:-

Step 1: First of all make a simple webpage by using HTML, CSS & Bootstrap.

Step 2: For scroll animation we need JavaScript. So we need to use <script type="text/javascript"> </script> at last, before </body> .

Step 3: In third step we need to add link (<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">) inside the <head> tag.

Step 4: Add JQuery between script tags.

Syntax: $(selector).action ();

Whereas,

$ sign to access jquery
(selector) to “query(or find)” HTML elements
JQuery action() to performed on the elements.

Step 5: Add variable like this:-

Step 6: Add console.log() method. Console is use for testing purpose.

Step 7: Give id where we need scroll animation. eg:-

Step 8: At last give a condition when to trigger animation while scrolling. eg

Tips: To set the position starting and ending point go to webpage, inspect it, then click to console and scroll it and you get something like this:-

Full Code:-

HTML

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" 
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> <!--important-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
   <link rel="stylesheet"href="css/style.css" ><!--link to css-->
</head>

<body>

<div class="heading text-center">
  <h2> SCROLL ANIMATION </h2>
</div>


<div>
<p>
  <h1>Scroll</h1>

<div class="main text-center " id="section1">
  <h2>Section 1</h2>
  <p>SCROLL TO SEE THE SCROLL TRIGGER EFFECT.</p>
  <p>page 1</p>
  <p>Scroll the page</p>
</div>

<div class="main text-center" id="section2">
  <h2 id="section-h2">Section 2</h2>
  <P>WELCOME TO SECOND PAGE</a>
  <P> A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs. This is because paragraphs show a reader where the subdivisions of an essay begin and end, and thus help the reader see the organization of the essay and grasp its main points. Paragraphs can contain many different kinds of information.</P>
</div>

<div class="row">
  <div class="col-md-4" id="img1">
    <div class="thumbnail">
      <a href="bg.jpg">
        <img src="bg.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4" id="img2">
    <div class="thumbnail">
      <a href="bg.jpg">
        <img src="bg.jpg" alt="Nature" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4" id=img3>
    <div class="thumbnail">
      <a href="bg.jpg">
        <img src="bg.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4" id="img4">
    <div class="thumbnail">
      <a href="bg.jpg">
        <img src="bg.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4" id="img5">
    <div class="thumbnail">
      <a href="bg.jpg">
        <img src="bg.jpg" alt="Nature" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4" id="img6">
    <div class="thumbnail">
      <a href="bg.jpg">
        <img src="bg.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
</div>

<script type="text/javascript" src="javascript/script.js"> </script> <!--to link javascript-->

	 </body>
	 </html>

CSS

#section1 {
  height: 600px;
  background-color: pink;
}

#section2 {
  height: 600px;
  background-color: yellow;
}

#section3 {
  height: 600px;
  background-color:blue;
}

#section4 {
  height: 600px;
  background-color:gray;
}

Javascript

$(document).ready(function(){
    $(window).scroll(function(){
      var scrolleffect=$(document).scrollTop();
      console.log(scrolleffect);

     if((scrolleffect>83)&&(scrolleffect<600)){
        $('#section2').addClass('animated bounceInLeft');
      }

       if((scrolleffect>670)&&(scrolleffect<1414)){
        $('#img1').addClass('animated fadeInUp');
        $('#img2').addClass('animated fadeInRight');
         $('#img3').addClass('animated bounceInRight');
      }
       if((scrolleffect>1015)&&(scrolleffect<2047)){
        $('#img4').addClass('animated bounceInLeft');
        $('#img5').addClass('animated flipInX');
         $('#img6').addClass('animated bounceInRight');
      }

    });
 });

Output:

Simple Scroll Effect using JavaScript+JQuery.

About author

Asbin Joshi

ttmind

Main Content

Simple Scroll Effect using JavaScript+JQuery.

About author

Asbin Joshi