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.
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% );
} h 1 ,
h 3 {
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 1 fr;
gap: 10px ;
padding : 1.5 rem;
opacity: 0 ;
background : #fff ;
max-width : 30 rem;
border-radius: 0.5 rem;
pointer-events: none ;
animation: slideUp 15 s infinite;
} .cards .card:nth-child( 1 ) {
animation-delay: -3 s;
} .cards .card:nth-child( 2 ) {
animation-delay: 0 s;
} .cards .card:nth-child( 3 ) {
animation-delay: 3 s;
} .cards .card:nth-child( 4 ) {
animation-delay: 6 s;
} .cards .card:nth-child( 5 ) {
animation-delay: 9 s;
} .cards .card:nth-child( 6 ) {
animation-delay: 12 s;
} .cards .card:nth-child( 7 ) {
animation-delay: 15 s;
} .cards .card:nth-child( 8 ) {
animation-delay: 18 s;
} .cards .card:nth-child( 9 ) {
animation-delay: 21 s;
} .cards .card:nth-child( 10 ) {
animation-delay: 24 s;
} .cards .card:nth-child( 11 ) {
animation-delay: 27 s;
} .cards .card:nth-child( 12 ) {
animation-delay: 30 s;
} .cards .card:nth-child( 13 ) {
animation-delay: 33 s;
/* Repeat from 1 after the 10th card */
} .cards .card:nth-child( 14 ) {
animation-delay: 36 s;
/* 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 ;
}
} |
Output: