How to Make Vertical Card Sliding Animation using only HTML & CSS ?
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 >w3wiki</ 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: