M/s VIKASH TECH - We Write Imaginations to Codes..!!

Vertical Card Sliding Animation using only HTML & CSS

Hey friends, today in this blog you’ll learn how to create Vertical Card Sliding Animation using only HTML & CSS.
In this Vertical Card Slider, there are five minimal cards with profile image, username, user profession, and a follow button. All these cards slide vertically and appear one by one. On the webpage, there are only three cards that appear out of five, and only the center one card has full opacity and the other two cards are a little bit fade out and that you can also see in the preview image. When these cards are sliding and you hover on them then the animation of the cards will be paused which means it stops sliding. The best thing about this animation and design is, it is created using only HTML & CSS.

Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Vertical Card Slider | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
</head>
<body>
  <div class="wrapper">
    <div class="outer">
      <div class="card" style="--delay:-1;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Praveen kumar</span>
            <p>Software Developer</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
      <div class="card" style="--delay:0;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Sanyukta Kumari</span>
            <p>Operation head</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
      <div class="card" style="--delay:1;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Jasmine Carter</span>
            <p>Freelancer & Vlogger</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Justin Chung</span>
            <p>Backend Developer</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Adrina Calvo</span>
            <p>Teacher & Advertiser</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
    </div>
  </div>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
}
.wrapper .outer{
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .card{
  background: #fff;
  width: 430px;
  display: flex;
  align-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  justify-content: space-between;
  border-radius: 100px 20px 20px 100px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  animation: animate 15s linear infinite;
  animation-delay: calc(3s * var(--delay));
}
.outer:hover .card{
  animation-play-state: paused;
}
.wrapper .card:last-child{
  animation-delay: calc(-3s * var(--delay));
}
@keyframes animate {
  0%{
    opacity: 0;
    transform: translateY(100%) scale(0.5);
  }
  5%, 20%{
    opacity: 0.4;
    transform: translateY(100%) scale(0.7);
  }
  25%, 40%{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0%) scale(1);
  }
  45%, 60%{
    opacity: 0.4;
    transform: translateY(-100%) scale(0.7);
  }
  65%, 100%{
    opacity: 0;
    transform: translateY(-100%) scale(0.5);
  }
}
.card .content{
  display: flex;
  align-items: center;
}
.wrapper .card .img{
  height: 90px;
  width: 90px;
  position: absolute;
  left: -5px;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.card .img img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.card .details{
  margin-left: 80px;
}
.details span{
  font-weight: 600;
  font-size: 18px;
}
.card a{
  text-decoration: none;
  padding: 7px 18px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
  transition: all 0.3s ease;
}
.card a:hover{
  transform: scale(0.94);
}
Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its…

Templates - In Flask

Templates are the structure of a website. Here in Python Flask. templates are treated as the views, which means these…

%d bloggers like this: