비전공자 개발일기

Javascript - Animated Navigation 본문

Javascript

Javascript - Animated Navigation

HiroDaegu 2021. 10. 9. 10:12
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>Animated Navigation</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <nav class="actvie" id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Works</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <button class="icon" id="toggle">
      <div class="line line1"></div>
      <div class="line line2"></div>
    </button>
  </nav>
</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 - Auto Text Effect  (0) 2021.10.11
Javascript - Animated Countdown  (0) 2021.10.10
Javascript - 3D Background Boxes  (0) 2021.10.07
Javascript - Faq Collapse  (0) 2021.10.05
Javascript - Event Keycodes  (0) 2021.10.04
'Javascript' Related Articles more