Scroll Animation | React Js WIth Full Source Code

Author - personCodeatnow

Scroll Animation with React JS is a captivating and interactive web development technique that brings your website to life by adding smooth and dynamic scrolling effects.

By utilizing the power of React JS, this animation library provides seamless transitions and visually appealing animations based on the user's scrolling actions.

To explore this exciting feature and access the source code, you can visit codeatnow.com, a platform dedicated to sharing free and open-source code snippets and projects.

Additionally, you can join the Telegram channel associated with codeatnow.com to stay updated with the latest resources and interact with a community of developers

Follow Us On Telegram   Telegram link

Download Code

HTML 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | Scroll to choose topic</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="phone">
  <div class="greeting">Welcome back!</div>
  <div class="tagline">Here's your topics for today by codeatnow</div>
  <div class="topics">
    <div class="topic topic1">
      <div class="topic-bg"></div>
      <div class="topic-title">
        <span class="topic-color topic-color1"></span>Javascript
      </div>
      <div class="topic-count">5 articles</div>
      <div class="articles">
        <div class="article article1">The spread operator</div>
        <div class="article article1">Demystifying scopes</div>
        <div class="article article1">JS or TS?</div>
        <div class="article article1">ES2030, what's new</div>
        <div class="article article1">NaN === NaN // false</div>
      </div>
    </div>
    <div class="topic topic2">
      <div class="topic-bg"></div>
      <div class="topic-title">
        <span class="topic-color topic-color2"></span>CSS
      </div>
      <div class="topic-count">4 articles</div>
      <div class="articles">
        <div class="article article2">The wonders of CSS</div>
        <div class="article article2">How to clamp</div>
        <div class="article article2">Centring objects</div>
        <div class="article article2">CSS arts</div>
      </div>
    </div>
  </div>
  <div class="topics">
    <div class="topic topic1">
      <div class="topic-bg"></div>
      <div class="topic-title">
        <span class="topic-color topic-color3"></span>Misc
      </div>
      <div class="topic-count">3 articles</div>
      <div class="articles">
        <div class="article article3">Imposter syndrome</div>
        <div class="article article3">Poster syndrome</div>
        <div class="article article3">Post office syndrome</div>
      </div>
    </div>
    <div class="topic topic2">
      <div class="topic-bg"></div>
      <div class="topic-title">
        <span class="topic-color topic-color4"></span>ReactJS
      </div>
      <div class="topic-count">6 articles</div>
      <div class="articles">
        <div class="article article4">React router in 5 min</div>
        <div class="article article4">Memoization in React</div>
        <div class="article article4">CSS-in-JS</div>
        <div class="article article4">5 brilliant hooks</div>
        <div class="article article4">JSX in depth</div>
        <div class="article article4">React Context vs Redux</div>
      </div>
    </div>
  </div>
  <div class="below-the-fold">
    <hr class="divider" />
    <div class="profile">Your profile</div>
    <div class="option">• your subscription</div>
    <div class="option">• settings</div>
    <div class="option">• stats</div>
    <div class="footer">
      <div class="magazine">CodeAtNow</div>
      <div class="copyright">© 1970-2021</div>
    </div>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>
CSS 
body {
  align-items: center;
  background-color: #11131e;
  color: white;
  display: flex;
  font-family: sans-serif;
  justify-content: center;
  height: 100vh;
}
.phone {
  background-color: #11131e;
  border-radius: 25px;
  box-shadow: 0 0.4px 0.8px rgba(0, 0, 0, 0.008),
    0 0.9px 1.9px rgba(0, 0, 0, 0.017), 0 1.6px 3.6px rgba(0, 0, 0, 0.031),
    0 2.9px 6.5px rgba(0, 0, 0, 0.058), 0 5.4px 12.8px rgba(0, 0, 0, 0.103),
    0 13px 36px rgba(0, 0, 0, 0.16);
  height: 520px;
  overflow: auto;
  padding: 32px;
  margin: 20px;
  width: 260px;
}
.phone::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.phone {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.greeting {
  font-size: 48px;
  font-weight: 700;
  margin-top: 12px;
}
.tagline {
  margin-top: 16px;
  margin-bottom: 28px;
}
.topics {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  position: relative;
  width: 100%;
}
.topic {
  height: 160px;
  position: relative;
  width: 120px;
}
.topic-bg {
  background-color: #2d2d34;
  border-radius: 25px;
  height: 100%;
  position: absolute;
  transform-origin: 50% 0;
  width: 100%;
}
.topic-title {
  font-size: 14px;
  position: relative;
  margin: 20px 20px 0;
}
.topic-color {
  background-color: #f0f;
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  margin-right: 4px;
  width: 12px;
}
.topic-color1 {
  background-color: #e4ca37;
}
.topic-color2 {
  background-color: #33ce79;
}
.topic-color3 {
  background-color: #ce3333;
}
.topic-count {
  color: #808189;
  font-size: 12px;
  margin: 8px 20px 0;
  position: relative;
}
.articles {
  margin: 15px 20px 0;
}
.article {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 8px;
  height: 18px;
  opacity: 0;
  position: relative;
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.article1:hover {
  text-decoration-color: #e4ca37;
}
.article2:hover {
  text-decoration-color: #33ce79;
}
.article3:hover {
  text-decoration-color: #ce3333;
}
.article4:hover {
  text-decoration-color: #f0f;
}
.below-the-fold {
  height: 268px;
  margin-top: 40px;
  width: 100%;
}
.below-the-fold.extra-margin0 {
  margin-top: 128px;
}
.below-the-fold.extra-margin1 {
  margin-top: 92px;
}
.below-the-fold.extra-margin2 {
  margin-top: 132px;
}
.below-the-fold.extra-margin3 {
  margin-top: 240px;
}
.divider {
  margin-bottom: 40px;
  margin-top: 48px;
}
.profile {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 12px;
}
.option {
  cursor: pointer;
  margin-bottom: 4px;
}
.option:hover {
  text-decoration: underline;
}
.magazine {
  margin-top: 92px;
  text-align: center;
}
.copyright {
  font-size: 14px;
  margin-top: 4px;
  text-align: center;
}
JS 
const btf = document.querySelector(".below-the-fold");
const phone = document.querySelector(".phone");
let active = 0;
let interactive = 0;
const topics = Array.from(document.querySelectorAll(".topic"));
const topicsBg = Array.from(document.querySelectorAll(".topic-bg"));
const articles = Array.from(document.querySelectorAll(".articles"));
const articleElements = articles.map((as) =>
  Array.from(as.querySelectorAll(".article"))
);
const interactiveEnable = (index) => {
  interactive = index;
};
topics.forEach((topic, index) => {
  topic.addEventListener("mousedown", () => interactiveEnable(index));
  topic.addEventListener("mouseover", () => interactiveEnable(index));
  topic.addEventListener("touchstart", () => interactiveEnable(index));
});
const activate = () => {
  if (interactive >= 0) {
    active = interactive;

    btf.className = "below-the-fold";
    btf.classList.add(`extra-margin${active}`);
  }
};
phone.addEventListener("scroll", function (e) {
  let y = e.target.scrollTop;
  // console.dir(y);

  // Activation
  if (y < 40) {
    activate();
  }
  if (y > 200) y = 200;

  articles.forEach((article, index) => {
    if (index === active) {
      // articles[index].style.opacity = `${y / 200}`;
      articleElements[index].forEach((a, index) => {
        let offset = y - index * 25;
        if (offset < 0) offset = 0;
        a.style.opacity = `${offset / (200 - index * 25)}`;
      });
    } else {
      articleElements[index].forEach((a, index) => {
        a.style.opacity = 0;
      });
    }
  });

  if (active === 0) {
    topics.forEach((topic, index) => {
      if (index === active) {
        topic.style.transform = `scale(${1 + y / 200}) translateX(${
          y / 5.6
        }px) translateY(${y / 3.18}px)`;
        topic.style.zIndex = 1;
      } else {
        topic.style.transform = `scale(${1 - y / 200})`;
        topic.style.zIndex = 0;
      }
    });
    topicsBg.forEach((topicBg, index) => {
      if (index === active) {
        topicBg.style.transform = `scaleY(${1 + (0.125 * y) / 200})`;
      }
    });
  }
  if (active === 1) {
    if (y > 200) y = 200;
    topics.forEach((topic, index) => {
      if (index === active) {
        topic.style.transform = `scale(${1 + y / 200}) translateX(${
          -y / 5.9
        }px) translateY(${y / 3.18}px)`;
        topic.style.zIndex = 1;
      } else {
        topic.style.transform = `scale(${1 - y / 200})`;
        topic.style.zIndex = 0;
      }
    });
    topicsBg.forEach((topicBg, index) => {
      if (index === active) {
        topicBg.style.transform = `scaleY(${1 + (0.0125 * y) / 200})`;
      }
    });
  }
  if (active === 2) {
    topics.forEach((topic, index) => {
      if (index === active) {
        topic.style.transform = `scale(${1 + y / 200}) translateX(${
          y / 5.6
        }px) translateY(${y / 18}px)`;
        topic.style.zIndex = 1;
      } else {
        topic.style.transform = `scale(${1 - y / 200})`;
        topic.style.zIndex = 0;
      }
    });
    topicsBg.forEach((topicBg, index) => {
      if (index === active) {
        topicBg.style.transform = `scaleY(${1 - (0.1 * y) / 200})`;
      }
    });
  }
  if (active === 3) {
    topics.forEach((topic, index) => {
      if (index === active) {
        topic.style.transform = `scale(${1 + y / 200}) translateX(${
          -y / 5.9
        }px) translateY(${y / 18}px)`;
        topic.style.zIndex = 1;
      } else {
        topic.style.transform = `scale(${1 - y / 200})`;
        topic.style.zIndex = 0;
      }
    });
    topicsBg.forEach((topicBg, index) => {
      if (index === active) {
        topicBg.style.transform = `scaleY(${1 + (0.2375 * y) / 200})`;
      }
    });
  }
});
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link