Scroll Animation

This Blog is about Scroll animation. It’s pretty simple and very useful.

Scroll-Animation

I have created these content blocks. You can see there are three to begin with but once you start scrolling the another block comes in from left and than right. We are going to use css transition for it to come in smooth and javaScript to tell where the trigger point is for the next block to come in and when we scroll it gonna activate the trigger point.

Let’s see how

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Scroll Animation</title>
  </head>
  <body>
    <h1>Scroll for the Animation to start</h1>
    <div class="box">
      <h2>Hey Welcome to my Blog</h2>
    </div>
    <div class="box">
      <h2>This Blog is about Scroll Animation</h2>
    </div>
    <div class="box">
      <h2>All you need to know is</h2>
    </div>
    <div class="box">
      <h2>Good Knowledge of HTML</h2>
    </div>
    <div class="box">
      <h2>Complete Knowledge of CSS</h2>
    </div>
    <div class="box">
      <h2>And how can we forget</h2>
    </div>
    <div class="box">
      <h2>JavaScript</h2>
    </div>
    <div class="box">
      <h2>Go ahead and try for yourself</h2>
    </div>
    <div class="box">
      <h2>Get creative use your own font and styles</h2>
    </div>
    <div class="box">
      <h2>All the Best</h2>
    </div>
    <script src="main.js"></script>
  </body>
</html>

You can use your own patterns. You can add paragraphs and images as well. Make sure to include the stylesheet.

CSS

@import url("https://fonts.googleapis.com/css2?family=Chango&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #ccfff7;
  font-family: "Chango", cursive;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

h1 {
  margin: 20px;
}

.box {
  align-items: center;
  background-color: #99ffff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 545px;
  height: 200px;
  border-radius: 20px;
  box-shadow: 7px 7px 5px 0px rgb(101 179 179 / 75%);
  margin: 10px;
  transform: translateX(400%);
  transition: transform 0.4s ease;
}

.box:nth-of-type(even) {
  transform: translateX(-350%);
}

.box.show {
  transform: translateX(0);
}

.box h2 {
  font-size: 45px;
}

You can use your custom fonts or any other font style.

JavaScript

const boxes = document.querySelectorAll(".box");

window.addEventListener("scroll", checkBoxes);

checkBoxes();

function checkBoxes() {
  const triggerBottom = (window.innerHeight / 5) * 4;

  boxes.forEach(box => {
    const boxTop = box.getBoundingClientRect().top;

    if (boxTop < triggerBottom) {
      box.classList.add("show");
    } else {
      box.classList.remove("show");
    }
  });
}

You can chose the number of blocks you want to display or the style properties that you want to use.

Please like and share if you found this blog helpful.

ThankYou

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: