HTML add downslide animation to texts once the site loads

Issue

I looked at some articles on the internet but I couldn’t find what I wanted. After the site loads for the first time, when I scroll and scroll to a paragraph, I want the text to scroll from the bottom and come after 1 second.Like on this site:https://www.armoli.com/.
For example I want to apply it here

<h6 style="margin-right: 70px;" class="section-title text-center">Our Solutions</h6>
           
            <h6 style="margin-right: 120px;" class="section-subtitle text-center mb-5 pb-3">We offer efficient, high performance and guaranteed solutions with our experienced team having strong references</h6>

         <div class="solutionout1">
            <img class="solu" style="height:80px ;" src="assets/imgs/webdevelop.png" alt="web development logo" >
<div ><p class="solutionhead">Web Development</p><p class="solutiontext">

    We offer fast, profitable, safe and effective solutions in the light of the latest innovations to those who entrust us with their companies' showcases in the internet world.</p></div>
        </div>

Solution

HTML, CSS, and JavaScript scroll reveal animations

    window.addEventListener('scroll', reveal);

    function reveal(){
      var reveals = document.querySelectorAll('.reveal');

      for(var i = 0; i < reveals.length; i++){

        var windowheight = window.innerHeight;
        var revealtop = reveals[i].getBoundingClientRect().top;
        var revealpoint = 150;

        if(revealtop < windowheight - revealpoint){
          reveals[i].classList.add('active');
        }
        else{
          reveals[i].classList.remove('active');
        }
      }
    }

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background: #1D212B;
}

section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section:nth-child(1){
  color: #fff;
}

section:nth-child(2){
  color: #1D212B;
  background: #fff;
}

section:nth-child(3){
  color: #fff;
}

section:nth-child(4){
  color: #1D212B;
  background: #fff;
}

section .container{
  margin: 100px;
}

section h1{
  font-size: 60px;
}

section h2{
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}

section .cards{
  display: flex;
}

section .cards .text-card{
  background: #2696E9;
  margin: 20px;
  padding: 20px;
}

section .cards .text-card h3{
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px){
  section h1{
    font-size: 40px;
  }

  section .cards{
    flex-direction: column;
  }
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 2s ease;
}

.reveal.active{
  transform: translateY(0px);
  opacity: 1;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Reveal</title>
  </head>
  <body>

    <section>
      <h1>Reveal Elements On Scroll</h1>
    </section>
    <section>
      <div class="container reveal">
        <h2>Your Title</h2>
        <div class="cards">
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container reveal">
        <h2>Your Title</h2>
        <div class="cards">
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container reveal">
        <h2>Your Title</h2>
        <div class="cards">
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="text-card">
            <h3>Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Answered By – Guit Adharsh

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

ErrorsFixing

HTML add downslide animation to texts once the site loads

Issue

Solution

Leave a Reply Cancel reply