비전공자 개발일기

Add To Cart Animation 본문

HTML _CSS

Add To Cart Animation

HiroDaegu 2022. 6. 3. 00:35
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ADD TO CART</title>
  <link rel="stylesheet" href="style.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css' integrity='sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==' crossorigin='anonymous'/>
  <script defer src="main.js"></script>
</head>
<body>
  <button class="cart-button">
    <span class="add-to-cart">ADD TO CART</span>
    <span class="added">ADDED</span>
    <i class="fas fa-shopping-cart cart-icon"></i>
    <i class="fas fa-box cart-item"></i>
  </button>
</body>
</html>
.cart-button {
  position: relative;
  padding: 10px;
  width: 200px;
  height: 60px;
  border: 0;
  outline: none;
  border-radius: 10px;
  background-color: #1B6EEE;
  cursor: pointer;
  color: #FFF;
  transition: .3s ease-in-out;
  overflow: hidden;
}

.cart-button span {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  color: #FFF;
}

.cart-button span.add-to-cart {
  opacity: 1;
}

.cart-button span.added {
  opacity: 0;
}

.cart-button .cart-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -10%;
  transform: translate(-50%, -50%);
  font-size: 2em;
}

.cart-button .cart-item {
  position: absolute;
  z-index: 3;
  top: -20%;
  left: 52%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
}

.cart-button.clicked .cart-icon {
  animation: cart 1.5s ease-in-out forwards;
}

.cart-button.clicked .cart-item {
  animation: box 1.5s ease-in-out forwards;
}

.cart-button.clicked span.add-to-cart {
  animation: add 1.5s ease-in-out forwards;
}

.cart-button.clicked span.added {
  animation: added 1.5s ease-in-out forwards;
}

@keyframes cart {
  0% {
    left: -10%;
  }
  40%, 60% {
    left: 50%;
  }
  100% {
    left: 110%;
  }
}

@keyframes box {
  0%, 40% {
    top: -20%;
  }
  60% {
    top: 40%;
    left: 52%;
  }
  100% {
    top: 40%;
    left: 112%;
  }
}

@keyframes add {
  0% {
    opacity: 1;
  }
  20%, 100% {
    opacity: 0;
  }
}

@keyframes added {
  0%, 80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
const cartButtons = document.querySelectorAll(".cart-button");

cartButtons.forEach(button => {
  button.addEventListener('click', cartClick);
})

function cartClick() {
  let button = this;
  button.classList.add('clicked');
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

GROWING LEON APPLE ICON  (0) 2022.06.06
To Do List by Pure CSS  (0) 2022.06.05
Snow Animation  (0) 2022.06.02
CSS Background Animation Effects  (0) 2022.05.30
RANGE SLIDER  (0) 2022.05.29
'HTML _CSS' Related Articles more