비전공자 개발일기

Javascript - Rotating Navigation 본문

Javascript

Javascript - Rotating Navigation

HiroDaegu 2021. 9. 27. 00:38
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>Rotating Navigation</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
    <div class="container">
      <div class="circle-container">
        <div class="circle">
          <button id="close">
            <i class="fas fa-times"></i>
          </button>
          <button id="open">
            <i class="fas fa-bars"></i>
          </button>
        </div>
      </div>

      <div class="content">
        <h1>Amazing Article</h1>
        <small>Florin pop</small>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sint non error placeat perspiciatis tempora iste magnam atque nam, voluptates nemo! Nostrum quaerat ullam ea optio corrupti, saepe reiciendis, dolores asperiores maxime odit consectetur, error impedit laboriosam! At provident debitis laudantium repudiandae modi ad dolores voluptatibus, vero, necessitatibus pariatur et illo iusto nisi placeat officia quisquam deserunt minima quibusdam. Perferendis blanditiis labore aut laudantium quisquam optio, commodi debitis. Magnam dolores rem porro laborum obcaecati dicta quam beatae assumenda qui necessitatibus quo facilis sed nesciunt est culpa sunt distinctio dolorum, odio ducimus excepturi repudiandae suscipit aspernatur. Dolor ad blanditiis qui temporibus?</p>
        <h3>My Cat</h3>
        <img src="cat.jpg" alt="Cat">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt optio veniam eum eaque accusamus possimus non fugit nulla animi mollitia dolorum autem quae libero, eveniet nostrum rem inventore iste! Vitae adipisci quae labore fugiat quidem neque minus facilis animi dolore, dolor, sunt impedit quas blanditiis doloribus pariatur enim voluptatum earum? Nemo dolore expedita eligendi optio, blanditiis officia quam sed. Harum laborum architecto expedita eum eveniet ipsam nulla reprehenderit illo fuga inventore, odit odio? Excepturi, commodi?</p> 
      </div>
    </div>
    <nav>
      <ul>
        <li><i class="fas fa-home"></i>HOME</li>
        <li><i class="fas fa-user-alt"></i>ABOUT</li>
        <li><i class="fas fa-envelope"></i>CONTACT</li>
      </ul>
    </nav>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  background-color: #333;
  color: #222;
  overflow-x: hidden;
  margin: 0;
}

.container {
  background-color: #fafafa;
  transform-origin: top left;
  transition: transform 0.5s linear;
  width: 100vw;
  min-height: 100vh;
  padding: 50px;
}

.container.show-nav {
  transform: rotate(-20deg);
}

.circle-container {
  position: fixed;
  top: -100px;
  left: -100px;
}

.circle {
  background-color: #ff7979;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  position: relative;
  transition: transform 0.5s linear;
}

.container.show-nav .circle {
  transform: rotate(-70deg);
}

.circle button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  background: transparent;
  border: 0;
  font-size: 26px;
  color: #fff;
}

.circle button:focus {
  outline: none;
}

.circle button#open {
  left: 60%;
}

.circle button#close {
  top: 60%;
  transform: rotate(90deg);
  transform-origin: top left;
}

.container.show-nav + nav li {
  transform: translateX(0);
  transition-delay: 0.3s;
}

nav {
  position: fixed;
  bottom: 40px;
  left: 0;
  z-index: 100;
}

nav ul {
  list-style-type: none;
  padding-left: 30px;
}

nav ul li {
  text-transform: uppercase;
  color: #fff;
  margin: 40px 0;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in;
}

nav ul li i {
  font-size: 20px;
  margin-right: 10px;
}

nav ul li + li {
  margin-left: 15px;
  transform: translateX(-150%);
}

nav ul li + li + li {
  margin-left: 30px;
  transform: translateX(-200%);
}

nav a{
  color: #fafafa;
  text-decoration: none;
  transition: all 0.5s;
}

nav a:hover {
  color: #FF7979;
  font-weight: bold;
}

.content img {
  max-width: 100%;
}

.content {
  max-width: 1000px;
  margin: 50px auto;
}

.content h1 {
  margin: 0;
}

.content small {
  color: #555;
  font-style: italic;
}

.content p {
  color: #333;
  line-height: 1.5;
}
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");

open.addEventListener("click", () => {
  container.classList.add("show-nav");
});

close.addEventListener("click", () => {
  container.classList.remove("show-nav");
})
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript - Scroll Animation  (0) 2021.09.29
Javascript - Hidden Search  (0) 2021.09.28
Javascript - Progress Steps  (0) 2021.09.26
Javascript - Expanding Cards  (0) 2021.09.25
Javascript - Vertical Slider  (0) 2021.09.24
'Javascript' Related Articles more