Animated Product Card using HTML CSS & JavaScript

Hello readers, today in this blog, you'll learn how to create this Animated Product Card using HTML CSS & JavaScript. earlier in the blog post I have shared how to create a Download Buton with Progress Bar using HTML CSS & JavaScript, and now it's time to create an Animated Product Card using HTML CSS & JavaScript.

As usual, like we do here I will be explaining first what this program does and also how it can be used in your next project.

An animated product card is an e-commerce productive card showing the user the price of an item, also the user an choose to buy this product or add to cart, some product card doesn't have the function to show the different color or size of the item, but some product card does have this ability to do so.

In this product card, we will be creating, we will have the ability to do that which I will be showing you all the functions in the video below, do watch the video so you can learn how I created this project (Animated Product Card).

Animated Product Card using HTML CSS & JavaScript [Video Tutorial]

In this video, I believe you have seen the demo of this video and the concept behind creating this animated product card I believe now you would have also known how to do similar projects like this on your own, but for those friends who doesn't know how to create this still and don't understand this, I would be diving in deeper on how this was made.

Now I have stated that this card can be used mainly in an e-commerce website but let's dive deeper into how this was created. As you have seen in the code of this video I created three colors and put them into a class, black, purple, and grey. those class which I have created are what changes the shoe color, as you saw earlier I had three different colors of the shoe, those are images then I added a class-list hiding one shoe and showing the other. They are multiple ways to create this but I just made this simple for you guys.

I have provided all HTML CSS & JavaScript source code that I have used to create this.

Animated Product Card using HTML CSS & JavaScript [Source Code]

To be able to create this Animated Product Card you will have to create two files for the UI: HTML CSS, and a JavaScript file for the functions of this project. After creating these two files then you can copy-paste the given codes on your text editor. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Animated Product Card</title>
  <!-- Boxicons CSS -->
  <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
      <div class="content">
        <div class="expand">
          <div class="logo">
            <img src="img/logo.png" alt="">
          </div>
        </div>
        <div class="icon">
          <span class='bx bx-cart-alt'></span>
        </div>
      </div>
      <div class="other">
        <div class="image">
          <img id="img-black" src="img/black.png" alt="">
          <img id="img-white" src="img/White.png" alt="">
          <img id="img-purple" src="img/Purple.png" alt="">
        </div>
        <div class="header">ADIDAS RUNFALCON</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, maxime. Optio iusto officia fugiat corporis quisquam totam non consequatur ipsam.</p>
        <div class="rating">
          <span class="bx bxs-star"></span>
          <span class="bx bxs-star"></span>
          <span class="bx bxs-star"></span>
          <span class="bx bxs-star"></span>
          <span class="bx bxs-star"></span>
          <span class="bx bx-star"></span>
        </div>
        <div class="tab">
          <div class="color_tab">
            <span>Color:</span>
            <div class="color black"></div>
            <div class="color purple"></div>
            <div class="color white"></div>
          </div>
          <div class="price_tab">
            <span>$40.00</span>
            <div class="end-price"><strike>$90.00</strike></div>
          </div>
        </div>
        <div class="button">
          <a href="#">BUY NOW</a>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS CODE:

/* Poppins import Google font link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #4d5bf9;
}
.wrapper{
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.4);
  border-radius: 20px;
  overflow: hidden;
}
.wrapper .content .expand .logo{
  width: 100px;
  height: 100px;
}
.wrapper .content .expand .logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wrapper .content .icon span{
  font-size: 23px;
}
.wrapper .content .icon{
  cursor: pointer;
}
.wrapper .content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .other .image{
  width: 300px;
  height: 300px;
  margin-bottom: -70px;
  user-select: none;
  pointer-events: none;
  transition: all 0.2s ease;
}
.wrapper .other .image img{
  width: 130%;
  height: 130%;
  object-fit: contain;
  transform: rotate(18deg);
  position: relative;
  bottom: 80px;
  transition: all 0.2s ease;
}
.wrapper .other .header{
  font-weight: 500;
  font-size: 24px;
  color: #161616;
}
.wrapper .other p{
  font-size: 12px;
  text-align: justify;
  color: #333;
  font-weight: 400;
}
.wrapper .other .rating{
  margin-top: 5px;
}
.wrapper .other .rating span{
  color: #4d5bf9;
}
.wrapper .other .tab{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.wrapper .other .tab .price_tab span{
  font-size: 25px;
  font-weight: 600;
  color: #4d5bf9;
  letter-spacing: 2px;
}
.wrapper .other .tab .price_tab{
  text-align: center;
}
.wrapper .other .tab .price_tab .end-price{
  font-size: 18px;
  color: #4d5bf9;
  font-weight: 400;
  letter-spacing: 2px;
}
.wrapper .other .tab .color_tab{
  display: flex;
  align-items: center;
}
.wrapper .other .tab .color_tab .color{
  width: 20px;
  height: 20px;
  background: #f2f2f2;
  border-radius: 20px;
  margin: 0 10px;
  cursor: pointer;
}
.wrapper .other .tab .color_tab .color.black{
  background: #222;
}
.wrapper .other .tab .color_tab .color.purple{
  background: #575fcf;
}
.wrapper .other .tab .color_tab .color.white{
  background: #bfbfbf;
}
.wrapper .other .tab .color_tab span{
  font-size: 20px;
  font-weight: 400;
}
.wrapper .other .button{
  width: 100%;
  padding: 8px;
  background: #575fcf;
  margin-top: 30px;
  text-align: center;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.97, -0.21, 1, 1);
}
.wrapper .other .button:hover{
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #575fcf;
}
.wrapper .other .button a{
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}
/*  */
.wrapper .other .image #img-black.hide{
  opacity: 0;
}
.wrapper .other .image #img-white{
  position: relative;
  bottom: 480px;
  opacity: 0;
}
.wrapper .other .image #img-white.show{
  opacity: 1;
}
.wrapper .other .image #img-purple{
  position: relative;
  bottom: 880px;
  opacity: 0;
}
.wrapper .other .image #img-purple.show{
  opacity: 1;
}
/*  */
.wrapper .other .tab .color_tab .color.black.active{
  box-shadow:  0 0 0 2px #fff, 0 0 0 4px #222;
}
.wrapper .other .tab .color_tab .color.purple.active{
  box-shadow:  0 0 0 2px #fff, 0 0 0 4px #575fcf;
}
.wrapper .other .tab .color_tab .color.white.active{
  box-shadow:  0 0 0 2px #fff, 0 0 0 4px #bfbfbf;
}

JAVASCRIPT CODE:

let card = document.querySelector('.wrapper'),
    color_black = document.querySelector('.black'),
    color_purple = document.querySelector('.purple'),
    color_white = document.querySelector('.white'),
    img_black = document.querySelector('#img-black'),
    img_white = document.querySelector('#img-white'),
    img_purple = document.querySelector('#img-purple');

    color_black.onclick = ()=>{
      img_black.classList.remove("hide");
      img_white.classList.remove("show");
      img_purple.classList.remove("show");
      color_black.classList.add("active");
      color_purple.classList.remove("active");
      color_white.classList.remove("active");
    }
    color_purple.onclick = ()=>{
      img_purple.classList.add("show");
      img_black.classList.add("hide");
      img_white.classList.remove("show");
      color_purple.classList.add("active");
      color_black.classList.remove("active");
      color_white.classList.remove("active");
    }
    color_white.onclick = ()=>{
      img_white.classList.add("show");
      img_black.classList.add("hide");
      img_purple.classList.remove("show");
      color_white.classList.add("active");
      color_purple.classList.remove("active");
      color_black.classList.remove("active");
    }

That's all now you've successfully created this Animated Product Card. If you faced difficulty understanding or copying the source code you can just download the source code file from the given download button, extract the file, and use it.

Animated Product Card using HTML CSS & JavaScript

Animated Product Card using HTML CSS & JavaScript [Video Tutorial]

Animated Product Card using HTML CSS & JavaScript [Source Code]

Creative Tutorials

Post a Comment

Post a Comment

Contact Form