Home
CSS
HTML

Scroll driven animation with Cards using HTML and CSS

Scroll Driven Animation | Coding Zemigle

Scroll-driven animations have become increasingly popular in web design, enhancing user engagement and providing dynamic storytelling experiences. This article will explore how to create scroll-driven animations with cards using HTML and CSS. By the end of this guide, you will have a solid understanding of the key concepts and code examples needed to implement your own scroll-driven animations.

Scroll-driven animations respond to user scrolling, creating an interactive experience as the user navigates through a webpage. These animations can include fading elements, sliding cards, scaling images, and much more. They add a layer of interactivity that can make your site more engaging and visually appealing.


Before diving into the code, let’s set up a simple HTML structure and some basic CSS to prepare our scroll-driven card animations.

Step 1: HTML Structure

First, create an HTML file (index.html) with a simple structure for our scrollable card section:

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Scroll driven animation</title>
</head>
<body>
  <div class="progress-bar"></div>
  <section>
    <div class="card-container">
      <div class="card">
        <h2>Nature</h2>
        <img src="/img/img1.png" alt="Nature" />
        <p>Lush greenery and colorful blooms make nature a vibrant tapestry of life and beauty.</p>
      </div>
      <div class="card">
        <h2>Island</h2>
        <img src="/img/img2.png" alt="Island" />
        <p>A tropical paradise island with turquoise waters and soft white sands invites relaxation.</p>
      </div>
      <div class="card">
        <h2>Valley</h2>
        <img src="/img/img3.png" />
        <p>The peaceful valley surrounded by towering mountains is the perfect escape into nature's serenity.</p>
      </div>
      <div class="card">
        <h2>Fuji</h2>
        <img src="/img/img4.png" alt="Mount Fuji" />
        <p>The majestic Mount Fuji stands tall, an iconic symbol of Japan’s natural beauty.</p>
      </div>
      <div class="card">
        <h2>Sunrise</h2>
        <img src="/img/img5.png" alt="Sunrise" />
        <p>Witness the golden hues of the sunrise as the world awakens to a new day.</p>
      </div>
      <div class="card">
        <h2>Lake</h2>
        <img src="/img/img6.png" alt="Lake" />
        <p>A tranquil lake reflects the beauty of the surrounding mountains and sky.</p>
      </div>
      <div class="card">
        <h2>Flowers</h2>
        <img src="/img/img7.png" alt="Flowers" />
        <p>Delicate blossoms sway in the breeze, painting the landscape in vibrant colors.</p>
      </div>
      <div class="card">
        <h2>Snow</h2>
        <img src="/img/img8.png" alt="Snow" />
        <p>Fresh snow blankets the ground, turning the landscape into a winter wonderland.</p>
      </div>
      <div class="card">
        <h2>Sunset</h2>
        <img src="/img/img9.png" alt="Sunset" />
        <p>The sky ignites with fiery oranges and pinks as the sun sets on the horizon.</p>
      </div>
      <div class="card">
        <h2>Autumn</h2>
        <img src="/img/img10.png" alt="Autumn" />
        <p>Autumn leaves, dressed in shades of red and gold, blanket the forest floor.</p>
      </div>
      <div class="card">
        <h2>Stars</h2>
        <img src="/img/img11.png" alt="Stars" />
        <p>Under a starry night, the vastness of the universe becomes clear in the midnight sky.</p>
      </div>
      <div class="card">
        <h2>Van</h2>
        <img src="/img/img12.png" alt="Van" />
        <p>A classic van parked by the beach, ready for an adventure-filled road trip.</p>
      </div>
      <div class="card">
        <h2>Cat</h2>
        <img src="/img/img13.png" alt="Cat" />
        <p>A curious cat explores its surroundings, moving with grace and elegance.</p>
      </div>
      <div class="card">
        <h2>Lavender</h2>
        <img src="/img/img14.png" alt="Lavender" />
        <p>Fields of lavender sway gently in the breeze, filling the air with their calming scent.</p>
      </div>
    </div>
  </section>
</body>
</html>



To see the scroll-driven animation in action, open your index.html file in a web browser. As you scroll down the page, you should see each card smoothly transition into view as it enters the viewport.


Step 2: CSS Styling

Next, create a CSS file (styles.css) to style our cards and container. This will provide a clean, modern look for our cards.

✲    style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  color: #001c35;
  background-color: #e3eafc;
  font-family: "Poppins", sans-serif;
}

h2 {
  font-size: 20px;
  margin: 0 0 1rem 0;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

p {
  font-size: 14px;
  margin: 0.5rem 0;
  overflow-wrap: break-word;
}

section {
  width: 100%;
  max-width: 800px;
  padding: 3rem 1rem;
  margin: 0 auto;
}

section img {
  width: 100%;
  max-width: 520px;
  height: 100%;
  max-height: 200px;
  object-fit: cover;
  margin: 1rem 0;
  display: block;
  border-radius: 8px;
  transform-origin: center;
}

.card {
  width: 100%;
  max-width: 520px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 10% entry 80%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.card h2, .card p {
  margin-bottom: 0.5rem;
}

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media screen and (max-width: 580px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

@keyframes scaleProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(100%);
  }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  z-index: 1;
  background: transparent;
  border-radius: 0 20px 20px 0;
  background: -webkit-linear-gradient(to right, #1A766C, #14619F, #3D9F14);
  background: linear-gradient(to right, orange, orangered, red);
  transform-origin: 0 50%;
  animation: scaleProgress auto linear;
  animation-timeline: scroll(root);
}

@keyframes fade-in {
  from {
    opacity: 0.3;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



•  Body Styles: Sets a light background and resets margin for the body.
•  Container: Centers the content and provides padding.
•  Card Container: Uses flexbox to arrange cards vertically and applies perspective for 3D effect.
•  Cards: Each card is styled with rounded corners, a shadow, and an initial state of being hidden (opacity 0 and translated down).

You can enhance the card content with images, descriptions, and buttons for better engagement. Modify the CSS transition property to experiment with different effects (e.g., scale, rotate). Ensure that your cards are responsive and look great on all devices. You can use media queries to adjust the layout for smaller screens.

Conclusion

Scroll-driven animations can significantly enhance the user experience on your website. By combining HTML, CSS, and JavaScript, you can create engaging card animations that respond to scrolling. This technique not only makes your content more interactive but also encourages users to explore your site further.

Feel free to experiment with different styles, animations, and content types to create a unique scroll-driven animation experience that aligns with your website's design and goals. Happy coding!