비전공자 개발일기

Javascript - 3D Page 본문

Javascript

Javascript - 3D Page

HiroDaegu 2021. 9. 21. 13:26
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>3D Page</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
  <link rel="stylesheet" href="style.css">
  <script defer src="https://hammerjs.github.io/dist/hammer.min.js"></script>
  <script defer src="main.js"></script>
</head>
<body>
  <header>Desktop Style 3D Page</header>
  <div class="container">
    <div class="wrapper">
      <div class="page">
        <h1>page1</h1>
        <ul class="icons">
          <li><a href="#"><i class="fa fa-home fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-cog fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-camera-retro fa-3x"></i></a></li>
          <li><a href="#"><i class="fab fa-chrome fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-film fa-3x"></i></a></li>
        </ul>
      </div>
      <div class="page">
        <h1>page2</h1>
        <ul class="icons">
          <li><a href="#"><i class="fa fa-home fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-cog fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-camera-retro fa-3x"></i></a></li>
          <li><a href="#"><i class="fab fa-chrome fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-film fa-3x"></i></a></li>
        </ul>
      </div>
      <div class="page">
        <h1>page3</h1>
        <ul class="icons">
          <li><a href="#"><i class="fa fa-home fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-cog fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-camera-retro fa-3x"></i></a></li>
          <li><a href="#"><i class="fab fa-chrome fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-film fa-3x"></i></a></li>
        </ul>
      </div>
      <div class="page">
        <h1>page4</h1>
        <ul class="icons">
          <li><a href="#"><i class="fa fa-home fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-cog fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-camera-retro fa-3x"></i></a></li>
          <li><a href="#"><i class="fab fa-chrome fa-3x"></i></a></li>
          <li><a href="#"><i class="fa fa-film fa-3x"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
  <ul id="indicator">

  </ul>
</body>
</html>
const wrapper = document.querySelector(".wrapper");
const page = document.querySelectorAll(".page");
const indicator = document.getElementById("indicator");
let indicator_li = indicator.querySelectorAll("li");

let yDeg = 0;
let indicator_num = 1;
let indicator_length = page.length;
let w = page[0].offsetWidth;
let page_angle = 0;
let page_vector = 0;

let hammer = new Hammer(wrapper);

// 페이지 초기화
function init_page() {
  w = page[0].offsetWidth;

  // 3D page 4면체 위치 정의
  for (let i = 0; i < page.length; i++) {
    page[i].style.transform = `rotateY(${page_angle}deg) translateZ(${
      w / 2
    }px)`;
    page_angle += 90;
  }

  // page wrapper 정면으로 초기화
  wrapper.style.transform = `translateZ(${-w / 2}px) rotateY(${yDeg}deg)`;
}

// 인디케이터 초기화
function init_indicator() {
  // 인디케이터 표시
  for (let i = 0; i < indicator_length; i++) {
    indicator.innerHTML += `<li> ${i + 1} </li>`;
  }
  indicator_li = indicator.querySelectorAll("li");
  change_page(indicator_num);
}

// 페이지 전환
function change_page(inum) {
  // 현재 인디케이터 하이라이트 표시
  indicator_li[inum - 1].setAttribute("class", "active");
  yDeg = -90 * (inum - 1);
  wrapper.style.transform = `translateZ(${-w / 2}px) rotateY(${yDeg}deg)`;
  // 인디케이터 표시
  for (let i = 0; i < indicator_li.length; i++) {
    indicator_li[i].removeAttribute("class");
  }
  indicator_li[inum - 1].setAttribute("class", "active");
}

init_page();
init_indicator();

for (let i = 0; i < indicator_li.length; i++) {
  indicator_li[i].addEventListener("click", () => {
    indicator_num = parseInt(this.innerText);
    change_page(indicator_num);
  });
}

// 터치 swipe left
hammer.on("swipeleft", function () {
  // 인디케이터(페이지) 이동 범위 내이면
  if (indicator_num < indicator_length) {
    page_vector = 1;
  } else {
    page_vector = 0;
  }

  indicator_num += page_vector;
  change_page(indicator_num);
});

// 터치 swipe right
hammer.on("swiperight", function () {
  if (indicator_num > 1) {
    page_vector = -1;
  } else {
    page_vector = 0;
  }
  indicator_num += page_vector;
  change_page(indicator_num);
});

// 창 크기 변경시 페이지 초기화
window.onresize = function () {
  init_page();
};
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript - Blurry Loading  (0) 2021.09.23
Javascript - Dynamic Banner  (0) 2021.09.22
Javascript - Calculator  (0) 2021.09.19
Javascript axios - search  (0) 2021.09.18
Javascript forEach, map, filter, some, every, reduce  (0) 2021.09.15
'Javascript' Related Articles more