Simple add to cart animation with CSS & JS

এই তারিখে

Hello, today I will a Simple add-to-cart animation with CSS & JS. Not great work but I hope you like this also comments about your thoughts. For more content follow me on Instagram. @dev_md_nazmul

HTML Code:

	
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Simple add to cart animation with CSS & JS</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
  </head>
  <body>
      <span class="pqt-minus">-</span>
      <button class="cart-button">
          <span class="add-to-cart"></span>
          <span class="added"></span>
          <i class="fa fa-shopping-cart"></i>
      </button>
      <span class="pqt-plus">+</span>

  </body>
  </html>

CSS Code:


  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");

  * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: "Inter", sans-serif;
  }
  body {
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ebe8ff;
  }
  .cart-button {
      position: relative;
      padding: 10px;
      width: 200px;
      height: 50px;
      border: 0;
      border-radius: 10px;
      background-color: #2b3044;
      outline: none;
      cursor: pointer;
      margin: 0 10px;
      color: #fff;
      transition: 0.3s ease-in-out;
      overflow: hidden;
  }
  .cart-button:hover {
      background-color: #202431;
  }
  .cart-button:active {
      transform: scale(0.9);
  }
  .cart-button .fa-shopping-cart {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: -10%;
      font-size: 2em;
      transform: translate(-50%, -50%);
  }
  .cart-button span {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 50%;
      font-size: 1.2em;
      color: #fff;
      transform: translate(-50%, -50%);
  }
  .cart-button span.add-to-cart {
      opacity: 1;
  }
  .cart-button span.added {
      opacity: 0;
  }
  .cart-button.clicked .fa-shopping-cart {
      animation: cart 1.5s ease-in-out forwards;
  }

  .cart-button.clicked span.add-to-cart {
      animation: txt1 1.5s ease-in-out forwards;
  }
  .cart-button.clicked span.added {
      animation: txt2 1.5s ease-in-out forwards;
  }
  @keyframes cart {
      0% {
          left: -10%;
      }
      40%,
      60% {
          left: 50%;
      }
      100% {
          left: 110%;
      }
  }

  @keyframes txt1 {
      0% {
          opacity: 1;
      }
      20%,
      100% {
          opacity: 0;
      }
  }
  @keyframes txt2 {
      0%,
      80% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }

  .pqt-plus,
  .pqt-minus {
      background: #fff;
      border: none;
      font-size: 20px;
      padding: 0 20px;
      width: 50px;
      border-radius: 10px;
      height: 50px;
  }

  .pqt-plus:hover,
  .pqt-minus:hover {
      background: #202431;
      color: #fff;
      cursor: pointer;
  }

  .pqt-plus,
  .pqt-minus {
      line-height: 50px;
  }

JS Code:

	
  var cartButtons = document.querySelectorAll('.cart-button');
  var card_value = document.querySelector(".added");
  var pqtplus = document.querySelector(".pqt-plus");
  var pqtminus = document.querySelector(".pqt-minus");
  var cartvalue = 0;

  cartButtons.forEach(button => {
     button.addEventListener('click', cartClick);
  });
  function cartClick() {
     let button = this;
     button.classList.add('clicked');
     card_value.textContent = cartvalue += 1;
  }

  pqtplus.addEventListener('click', () =>{ if(card_value.nodeValue <= 0){ card_value.textContent = cartvalue +=1; }});

  pqtminus.addEventListener('click', function(){ if(Number(card_value.innerText)-1 >= 0){ card_value.textContent = cartvalue -=1; }});

Output:

Thanks for stay with us.😇

মন্তব্যসমূহ

একটি মন্তব্য পোস্ট করুন