Cards with Image Scroll Animation using Vanilla JavaScript

This JavaScript code snippet helps you to create a card with image scroll animation. It defines a function called isElementInViewport that takes an element as an argument and checks if it is visible on the screen. The isCardVisible function iterates through all the elements with the class “card” and adds or removes the class “isVisible” depending on whether or not the element is visible on the screen using the isElementInViewport function.

Finally, the isCardVisible function is called when the DOM is loaded and when the window is scrolled or resized, to update the visibility of the cards on the screen.

How to Create Cards with Image Scroll Animation using Vanilla JavaScript

First of all, load the following assets into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Create the HTML structure for the scroll animation as follows:

<div class="wrapper">
  <div class="card">
    <img src="https://i.ibb.co/Wc7RLgG/pikachu.png" />
    <h2 class="card-title">Pikachu</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/TkBFwhX/alakazam.png" />
    <h2 class="card-title">Alakazam</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/fXsLm23/arbok.png" />
    <h2 class="card-title">Arbok</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/gwdv5nV/bulbasaur.png" />
    <h2 class="card-title">Bulbasaur</h2>
  </div>
  <div class="card"><img src="https://i.ibb.co/ZKqChM6/butterfree.png" />
    <h2 class="card-title">Butterfree</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/89F8Kct/charmander.png" />
    <h2 class="card-title">Charmander</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/b6WPmYn/exeggutor.png" />
    <h2 class="card-title">Exeguttor</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/51SCFG1/voltorb.png" />
    <h2 class="card-title">Voltorb</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/r7j7Tq7/jigglypuff.png" />
    <h2 class="card-title">Jigglypuff</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/mcFQ5jZ/magikarp.png" />
    <h2 class="card-title">Magikarp</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/4VysCs0/meowth.png" />
    <h2 class="card-title">Meowth</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/zXz0LZ7/pidgeotto.png" />
    <h2 class="card-title">Pidgeotto</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/xmz6Q7b/snorlax.png" />
    <h2 class="card-title">Snorlax</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/8Y9v7tF/squirtle.png" />
    <h2 class="card-title">Squirtle</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/Y3287sv/starmie.png" />
    <h2 class="card-title">Starmie</h2>
  </div>
  <div class="card">
    <img src="https://i.ibb.co/x3cBmSZ/venonat.png" />
    <h2 class="card-title">Venonat</h2>
  </div>
  
</div>

Now, style the scroll animation using the following CSS styles:

@import url("https://fonts.googleapis.com/css?family=Space+Mono");
.wrapper {
  display: flex;
  height: 100vh;
  align-items: center;
  box-sizing: border-box;
}
.cd__main{
display: block !important;
}

.card {
  margin: 0 3vw;
  width: 25vw;
  flex-shrink: 0;
  padding: 2vw;
  box-sizing: border-box;
  position: relative;
  border-radius: 3px;
  border: 2px solid #000;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.card-title {
  transition: 0.3s;
  text-align: center;
  font-family: "Space Mono", monospace;
  margin: 2vw 0 0;
  font-size: 2.8vw;
  opacity: 0;
  transform: scale(0.7);
}
.card:last-child:after {
  content: "";
  width: 6vw;
  position: absolute;
  height: 100%;
  right: -6vw;
  top: 0;
}
.card img {
  max-width: 70%;
  max-height: 50vh;
  opacity: 0;
  margin: auto;
  display: block;
  transition: 0.35s;
  transform: rotate(6deg) translate(0, 40px) scaleY(0.6);
}
.card.isVisible img {
  max-width: 100%;
  opacity: 1;
  transform: none;
}
.card.isVisible .card-title {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.card:first-child {
  margin-left: 6vw;
}

Finally, add the following JavaScript function for its functionality:

const cards = document.querySelectorAll(".card");

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (
    window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth));

}

function isCardVisible() {
  for (card of cards) {
    isElementInViewport(card) ?
    card.classList.add("isVisible") :
    card.classList.remove("isVisible");
  }
}

document.addEventListener("DOMContentLoaded", isCardVisible);
window.addEventListener("scroll", isCardVisible);
window.addEventListener("resize", isCardVisible);

That’s all! hopefully, you have successfully created Cards with image scroll animation using vanilla JavaScript. If you have any questions or suggestions, feel free to comment below.