일정 시간 이상 눌러야 동작하는 버튼

2023-05-10 05:57

🗂️ 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas

목록 보기

스크롤에 따라 색이 바뀌는 텍스트 스크롤에 따라 기울어지며 나타나는 이미지 스크롤 시 특정 위치에서 postion fixed가 되는 영역 Customized cursor 일정 시간 이상 눌러야 동작하는 버튼 마우스 커서에 따라 입체적으로 움직이는 요소 스크롤을 내렸을 때 나타나는 이미지 Canvas particle 다루기

Javascript setInterval()

setInterval(myFunction, 1000); // 매 1000 밀리초마다 myFunction을 동작시킴

javascript

특정 간격의 시간(밀리초)에 맞춰 반복하여 특정 함수를 동작하게 함
interval의 동작을 멈추려면 clearInterval()함수 사용
JS native 함수

결과물

html

<body>
  <!-- 일정 시간 누르기 전에 있는 wrapper -->
  <section class="preloader shown-area">
    <button class="preloader_btn">
      <span class="preloader_btn_hold">Hold</span>
    </button>
  </section>

  <section class="header hidden-area">
    header
  </section>
</body>

html

css

body {
  background-color: #1e4029;
}

.shown-area {
  display: block;
  opacity: 1;
}

.hidden-area {
  display: none;
  opacity: 0;
}

.preloader {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #521714;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.preloader_btn {
  position: absolute;
  top: 50vh;
  left: 50vw;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 0;
  color: rgb(213, 165, 78);
  background-color: rgb(30, 64, 41);
  margin-top: -60px;
  margin-left: -60px;
}

.preloader_btn_hold {
  font-size: 19px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: normal;
}

css

javascript

const preloaderBtn = document.querySelector('.preloader_btn')

  let intervalId = null
  let scale = 1

  const preloaderHideThreshold = 18

  function setPreloaderStyle(scale) {
    preloaderBtn.style.transform = `scale(${scale})`
    document.querySelector('.preloader_btn_hold').style.opacity = 1 - (scale - 1)
  }

  preloaderBtn.addEventListener('mousedown', () => {
    console.log('mousedown',)
    intervalId = setInterval(() => {
      scale += 0.175;

      setPreloaderStyle(scale)

      if (scale >= 1 + preloaderHideThreshold) {
        const header = document.querySelector('.header')

        document.querySelector('.preloader').classList.add('hidden-area');

        header.classList.remove('hidden-area');

        header.classList.add('shown-area');

        clearInterval(intervalId)
      }
    }, 10)
  })

  preloaderBtn.addEventListener('mouseup', () => {
    clearInterval(intervalId)

    intervalId = setInterval(() => {
      scale -= 0.075

      setPreloaderStyle(scale)

      if (scale <= 1) {
        clearInterval(intervalId)
      }
    })
  })

javascript