비전공자 개발일기

Javascript - Animated Countdown 본문

Javascript

Javascript - Animated Countdown

HiroDaegu 2021. 10. 10. 00:52
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Animated Countdown</title>
    <script defer src="main.js"></script>
  </head>
  <body>
    <div class="counter">
      <div class="nums">
        <span class="in">3</span>
        <span>2</span>
        <span>1</span>
        <span>0</span>
      </div>
      <h4>Get Ready</h4>
    </div>

    <div class="final">
      <h1>GO!</h1>
      <button id="replay">Replay</button>
    </div>
  </body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

h4 {
  font-size: 20px;
  margin: 5px;
  text-transform: uppercase;
}

.counter {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.counter.hide {
  transform: translate(-50%, -50%) scale(0);
  animation: hide .2s ease-out;
}

@keyframes hide {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
  }
}

.final {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  text-align: center;
}

.final.show {
  transform: translate(-50%, -50%) scale(1);
  animation: show .2s ease-out;
}

@keyframes show {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }

  30% {
    transform: translate(-50%, -50%) scale(1.4);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.nums {
  color: #3498db;
  font-size: 50px;
  position: relative;
  overflow: hidden;
  width: 250px;
  height: 50px;
}

.nums span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(120deg);
  transform-origin: bottom center;
}

.nums span.in {
  transform: translate(-50%, -50%) rotate(0);
  animation: goIn .5s ease-in-out;
}

.nums span.out {
  animation: goOut .5s ease-in-out;
}

@keyframes goIn {
  0% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  30% {
    transform: translate(-50%, -50%) rotate(-20deg);
  }
  60% {
    transform: translate(-50%, -50%) rotate(10deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0);
  }
}

@keyframes goOut {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  60% {
    transform: translate(-50%, -50%) rotate(20deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-120deg);
  }
}
const nums = document.querySelectorAll(".nums span");
const counter = document.querySelector(".counter");
const finalMsg = document.querySelector(".final");
const replay = document.querySelector("#replay");


runAnimation()

function resetDOM() {
  counter.classList.remove("hide");
  finalMsg.classList.remove("show");

  nums.forEach(num => num.classList.value = " ");

  nums[0].classList.add("in");
}

function runAnimation() {
  nums.forEach((num, index) =>{
    const nextToLast = nums.length - 1

    num.addEventListener("animationend", (e) => {
      if(e.animationName === "goIn" && index !== nextToLast) {
        num.classList.remove("in");
        num.classList.add("out");
      } else if(e.animationName === "goOut" && num.nextElementSibling) {
        num.nextElementSibling.classList.add("in");
      } else {
        counter.classList.add("hide");
        finalMsg.classList.add("show");
      }
    })
  } )
}

replay.addEventListener("click", () => {
  resetDOM();
  runAnimation();
})
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript - Button Ripple Effect  (0) 2021.10.12
Javascript - Auto Text Effect  (0) 2021.10.11
Javascript - Animated Navigation  (0) 2021.10.09
Javascript - 3D Background Boxes  (0) 2021.10.07
Javascript - Faq Collapse  (0) 2021.10.05
'Javascript' Related Articles more