How to Make Vertical Card Sliding Animation using only HTML & CSS ?

Last Updated : 05 Mar, 2024

The vertical card slider serves as an engaging way to showcase content, such as profiles, products, or services, in a modern web design. In this tutorial, we’ll see the creation of a visually appealing vertical card slider with smooth animation effects using HTML and CSS.

Screenshot-2024-02-26-123722

Approach :

Firstly use the HTML to structure the cards and their content.
Now applying CSS to style the cards and create animation effects.
Define the animation keyframes for the sliding effect. Start with the cards hidden below the viewport, then gradually move them up, show them, move them down, and hide them again.
Use the keyframe animations to achieve the sliding effect.
You can control animation delay using custom CSS properties.

Example: Implementation to make a vertical sliding animation.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Vertical Card Scrolling Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Vertical Card Sliding Animation</h3>
    <div class="cont">
        <div class="cards">
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <div class="card">
                <p class="card-text"></p>
            </div>
            <!-- Add more cards here as needed -->
        </div>
    </div>
</body>
 
</html>

CSS

body {
  margin: 100px 0 0 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Montserrat;
  background: rgb(219, 113, 113);
}
 
.cont {
  display: grid;
  place-items: center;
  min-height: 180px;
  -webkit-mask-box-image: -webkit-linear-gradient(
    top, transparent, transparent 0, white 10%, white 80%, transparent 100%);
}
 
h1,
h3 {
  color: green;
  text-align: center;
}
 
.cards {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
 
.card-text {
  background-color: blue;
}
 
.cards .card {
 
  position: absolute;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  padding: 1.5rem;
  opacity: 0;
  background: #fff;
  max-width: 30rem;
  border-radius: 0.5rem;
  pointer-events: none;
  animation: slideUp 15s infinite;
}
 
.cards .card:nth-child(1) {
  animation-delay: -3s;
}
 
.cards .card:nth-child(2) {
  animation-delay: 0s;
}
 
.cards .card:nth-child(3) {
  animation-delay: 3s;
}
 
.cards .card:nth-child(4) {
  animation-delay: 6s;
}
 
.cards .card:nth-child(5) {
  animation-delay: 9s;
}
 
.cards .card:nth-child(6) {
  animation-delay: 12s;
}
 
.cards .card:nth-child(7) {
  animation-delay: 15s;
}
 
.cards .card:nth-child(8) {
  animation-delay: 18s;
}
 
.cards .card:nth-child(9) {
  animation-delay: 21s;
}
 
.cards .card:nth-child(10) {
  animation-delay: 24s;
}
 
.cards .card:nth-child(11) {
  animation-delay: 27s;
}
 
.cards .card:nth-child(12) {
  animation-delay: 30s;
}
 
.cards .card:nth-child(13) {
  animation-delay: 33s;
  /* Repeat from 1 after the 10th card */
}
 
.cards .card:nth-child(14) {
  animation-delay: 36s;
  /* Repeat from 2 after the 11th card */
}
 
/* Continue this pattern for more cards */
 
@keyframes slideUp {
  0% {
    transform: translateY(100%) scale(0.5);
    opacity: 0;
  }
 
  5%,
  20% {
    transform: translateY(100%) scale(0.7);
    opacity: 0.4;
  }
 
  25%,
  40% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
 
  45%,
  60% {
    transform: translateY(-100%) scale(0.7);
    opacity: 0.4;
  }
 
  65%,
  100% {
    transform: translateY(-100%) scale(0.5);
    opacity: 0;
  }
}