Cards Stack With Scrolling Effect Using CSS

This code creates a stack of cards with a scrolling effect using CSS. It positions cards vertically with a tilt. It’s helpful for showcasing items with an interactive layout.

You can use this code on your website’s product showcase page for a visually appealing display. It enhances user engagement with its interactive scrolling effect. It provides a modern and attractive way to present information or products to your visitors.

How to Create Cards Stack With Scrolling Effect Using CSS

1. Begin by creating the HTML structure for your cards stack. Inside the <main> element, create a <div> with an id of “stack”. Within this div, add individual card elements with the class “card”.

<main>
  <div id="stack">
    <div class="card">whatever</div>
    <div class="card">let&singleQuote;s go</div>
    <div class="card">not your worst</div>
    <div class="card">right on</div>
    <div class="card">party time</div>
    <div class="card">I think I get it</div>
    <div class="card">enough then</div>
  </div>
</main>

2. In your CSS file, define the styles for the cards stack. You can set the overall layout, such as background color and font styles. Additionally, apply styles to the “.card” class to customize each card’s appearance, including its position, size, and tilt effect.

* { margin: 0; font: inherit }

body {
  background: #e3e2ff;
  text-align: center;
}

main {  
  --tilt-angle: 3deg;
  position: relative;
  display: grid;
  grid-template-rows: 1fr max-content;
  height: 100vh;
  width: 30rem;
  margin: auto;
  font-size: 2.4rem;
  top: 10vh;
}

.card {
  position: sticky;
  top: calc(var(--top) * 1px);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  background-color: white;
  border-radius: 0.5em;
  padding: 3em;
  margin-bottom: 2em;
  transform: rotate(calc(var(--tilt-angle) * (2 * (var(--r) - 0.5))));
  transition: * 0.3s ease;
}

.card.stuck {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Add a box shadow effect */
  background-color: red;
}

.card:nth-child(4n) {
  --r: 0.7;
  --top: 0;

}

.card:nth-child(4n + 1) {
  --r: 0.2;
  --top: 50;
  
}

.card:nth-child(4n + 2) {
  --r: 0.9;
  --top: 100;
  
}

.card:nth-child(4n + 3) {
  --r: 0.4;
  --top: 150;
  
}

3. If you want to add interactivity, you can use JavaScript to observe when cards intersect with the viewport and apply the “stuck” class accordingly. Uncomment the provided JavaScript code and adjust it as needed. (Optional)

// got bored 

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

// cards.forEach((card) => {
//   const observer = new IntersectionObserver(
//     ([e]) => e.target.classList.toggle("stuck", e.intersectionRatio < 1),
//     { threshold: [1] }
//   );

//   observer.observe(card);
// });

That’s all! hopefully, you have successfully created a Cards Stack With a Scrolling Effect on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.