HTML add downslide animation to texts once the site loads-CodePudding

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;" >Our Solutions</h6>
           
            <h6 style="margin-right: 120px;" >We offer efficient, high performance and guaranteed solutions with our experienced team having strong references</h6>

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

    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>

CodePudding user response：

You can do this with the following JavaScript and CSS. Adding a transition property to ease-in the element fade in and also slowly come down.

$(document).ready(function() {
  $('#title').addClass('fade-in');
});

#title {
  font-size: 26px;
  opacity: 0;
  transition: all 0.6s ease-in;
  margin-top: -50px;
}

#title.fade-in {
  margin-top: 0;
  opacity: 1;
}

<h1 id="title">This is a test, I will hover in</h1>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

const intersectionCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let elem = entry.target;
      if (entry.intersectionRatio >= 0.75) {
        elem.classList.add("animate");
      }
    }
  });
};

const Animateditems = document.querySelectorAll("div.text");
let options = {
  threshold: 1.0,
};
let observer = new IntersectionObserver(intersectionCallback, options);

Animateditems.forEach((item) => {
  observer.observe(item);
});

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
html {
  font-size: 66.6%;
}
.scrolldown {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
h1 {
  font-size: 3rem;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
}
.flex-container > div {
  flex: 1 1 100%;
  border: 0.1rem solid black;
  padding: 2rem;
  margin: 2rem;
}

.flex-container > div.animate p {
  animation: fadeIn 2s;
  opacity: 1;
}
.flex-container > div.animate h2 {
  animation: fadeIn 2s;
  opacity: 1;
}

.flex-container > div h2 {
  font-size: 2.5rem;
  opacity: 0;
  transform: translateY(0rem);
}
.flex-container > div p {
  font-size: 1.8rem;
  opacity: 0;
}

@media screen and (min-width: 650px) {
  .flex-container > div {
    flex: 1 1 40%;
    border: 0.1rem solid black;
  }
}

@keyframes fadeIn {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0rem);
    opacity: 1;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>animation</title>
  </head>
  <body>
    <div ><h1>scroll down</h1></div>
    <div >
      <div >
        <h2>This is a title</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
          inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
          aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
          omnis suscipit iure illum.
        </p>
      </div>
      <div >
        <h2>This is a title</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
          inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
          aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
          omnis suscipit iure illum.
        </p>
      </div>
      <div >
        <h2>This is a title</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
          inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
          aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
          omnis suscipit iure illum.
        </p>
      </div>
      <div >
        <h2>This is a title</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
          inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
          aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
          omnis suscipit iure illum.
        </p>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Here is a complete vanilla solution. (open it in full screen mode)