Animation On Scroll using HTML, CSS & JS

Animation On Scroll, means when you scroll a webpage you see some animation were added in every section which makes the webpage attractive. But making elements appear based on their scroll position is a little bit difficult and popular design choice which usually involves using plugin or library. 

So In this tutorial you’ll learn how to implement animation on scroll with easy in simple steps. Not too much coding is necessary but basics knowledge is require most.

◘ What is AOS ?

AOS stands for Animation On Scroll means on scrolling you will see animations. You might have observed such type of animations on some good quality webpages/blogs. 

 Benefits of AOS ?

• Attract more users

  • Provide a better niche 

  •  Better navigation and many more.

Scrolling Animation Demo

Here’s an example of how animating elements on scroll works. If you don’t want to do more simply take the code from below and add your elements.

HTML

<!-- Created By DealwithCodes - https://dealwithcodes.blogspot.com/ -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
    />
  <style>
  .section-container section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
}

.section-container img {
  width: 400px;
  border-radius: 10px;
  border: 2px solid black;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.section-container section h2 {
  font-size: 40px;
  margin: 16px 0;
}

.section-container p {
  padding: 8px 0;
}

.section-container .section-heading {
  width: 400px;
  text-align: center;
  border-top: 2px solid #53d7ee;
  border-bottom: 2px solid #53d7ee;
  margin-bottom: 10px;
}
  </style>
  </head>
  <body>
    <div class="section-container">
      <section>
        <div class="section-heading">
          <h2 data-aos="fade-left" data-aos-duration="1000">theAShub</h2>
        </div>
        <p data-aos="fade" data-aos-duration="800" data-aos-delay="400">
        https://theashub.blogspot.com/
        </p>
        <img
          data-aos="fade-right"
          data-aos-duration="1500"
          data-aos-delay="200"
          src="https://1.bp.blogspot.com/-FgaI4W486_s/X1ssy2C04wI/AAAAAAAABnU/B2yZBIHBe6s1Akg_sTgwcDXR3JsZv7g8gCLcBGAsYHQ/s16000/1024%2Bheashub%2Boriginal.png"
        />
      </section>

      <section>
        <div class="section-heading">
          <h2 data-aos="fade-up" data-aos-duration="1000">About</h2>
        </div>
        <p data-aos="fade" data-aos-duration="800" data-aos-delay="400">
         Join your won community with theAShub</p>
        <img
          data-aos="fade"
          data-aos-duration="1500"
          data-aos-delay="200"
          src="https://1.bp.blogspot.com/-6kgngE78IIE/YJjonH9kxwI/AAAAAAAAC2Q/I3QIcC79wjM3Io7eE4MDHdXMEWhTxbaVwCLcBGAsYHQ/s16000/cond.jpg"
          alt=""
        />
      </section>

      <section>
        <div class="section-heading">
          <h2 data-aos="fade-right" data-aos-duration="1000">Owner & Founder</h2>
        </div>
        <p data-aos="fade" data-aos-duration="800" data-aos-delay="400">
          Anurag Singh</p>
        <img
          data-aos="fade-left"
          data-aos-duration="1500"
          data-aos-delay="200"
          src="https://1.bp.blogspot.com/-1NohNI2D8Y4/YDCKxgO3WwI/AAAAAAAACk4/jj6mp3QX_OgVAOpyKCd8a1ZrpRjkKQyowCLcBGAsYHQ/s16000/DSC_0095-01.jpeg"
          alt=""
        />
      </section>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

    <script>
      AOS.init();
    </script>
  </body>
</html>

◘ Learn how to use AOS ?

    • Create your basic HTML Structure as per need.

      Add below code in <head> tag.

<link href=“https://unpkg.com/aos@2.3.1/dist/aos.css” rel=“stylesheet”>

    • Create framework of CSS for your HTML.

   • Add below JS in </body> tag.

<script src=“https://unpkg.com/[email protected]/dist/aos.js”></script>

 

<script>  AOS.init(); </script>

• Now choose animation style from AOS Website

    • Suppose you have chosen fade-up animation as shown in figure

 

    • Copy the code of desire animation

       Like for fade-up     <div data-aos=“fade-up”></div> this is the code

• Now from your HTML

      let suppose below code is for header section, you want add animation in this section

       <h2 data-aos=”fade-up”>theAShub</h2>

      • Now simply your animation code is added into header section.

      • Similarly you can add animation in every section by taking the code from AOS website and adding in section. 

◘ How to implement AOS into Blogger ?

   For adding through Layout Section:-

   • Prepare the codes as you want

   • Then take desire place and add HTML/JS gadget

   • Paste the code in it and have fun.

Simply you can do this same by Edit Html Section in Theme Section of Blogger Dashboard.

 

◘ Creating coding structure

For users, who don’t know much about coding they can simply use the code as it is or can contact us for editing code as they want.

Thanks for being here, stay connect with us.

Leave a Comment