[js] 우주선이 지나가는 진행바(프로그래스바)

완성본(체험용)

예시 코드에 보면 로딩바가 적힌 부분이 있는데, 진행바 이다(오타).

- UFO 이미지는 픽시베이에서 링크 해온거라 어느 순간 안 될 수도 있음.

See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

 

HTML 코드

    <article class="progress">
        <div class="bar"></div>
        <p class="alert"></p>
      </article>
  
      <h1>스크롤</h1>

 

CSS 코드

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 10000px;
  background: linear-gradient(160deg, black, black);
}

h1 {
  width: 100%;
  top: 3rem;
  color: rgb(219, 204, 74);
  position: fixed;
  text-align: center;
}

/* 프로그래스 테두리 */
.progress {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 30px;
  background-color: black;
}

/* 우주선 */
.progress .bar {
  position: absolute;
  width: 100px;
  height: 50px;
  background-image: url("https://pixabay.com/get/g49986debfbd170c0c4b29a9e6b4ee68715b61e8c76dfac2cdf1018c8eb79a2f1e6dd7cf55cbd3e3a2bdfe9b6a1520f27_640.png");
  background-size: cover;
  box-shadow: 0 200px 50px 40px rgb(203, 203, 163),
    0 210px 50px 30px rgb(237, 252, 28);
  border-radius: 50%;
  transition: 0.3s;
}

/* 경고 문구 나타냄 */
.alert {
  transition: 0.5s;
  position: absolute;
  left: 50%;
  top: 10rem;
  translate: -50% -50%;
  color: red;
  font-size: 2rem;
  text-shadow: 15px 10px 20px, 0 15px 15px tomato;
  font-family:cursive;
  text-align: center;
}

 

JS 코드

(참고) 스크롤바의 전체 비율을 구하는 방법

세로 스크롤바 Y 축이 이동한 위치 값

(window.scrollY)

/

웹 브라우저의 총 높이

(document.documentElement.scrollHeight)

-

현재 유저에게 보이는 브라우저 화면의 높이

(window.innerHeight 혹은 window.outerHeight)

 

해주면 된다.

 

요약하면

window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) *100

= 실제 브라우저에서 현재 까지 스크롤되고 있는 height(높이)의 백분율 이 된다.

 

위 공식을 이용해서 간단하게 프로그래스바를 만들 수 있고,

활용하기에 따라서 퍼센트별로 다양한 애니메이션을 적용할 수도 있다.

(function () {
  const $h1 = document.querySelector("h1");
  const bar = document.querySelector(".bar");
  const alert = document.querySelector(".alert");

  //   프로그래스바를 조작하는 함수
  function scrollFunc() {
    const scrollXPer = Math.floor(
      (window.scrollY /
        (document.documentElement.scrollHeight - window.innerHeight)) *
        100
    );
      //vw는 웹브라우저의 가로축 전체를 기준으로 0~100의 비율을 가지므로 % 대신 활용 가능
    $h1.innerHTML = scrollXPer;
    bar.style.transform = `translate3d(${scrollXPer}vw, 0px, 0px)`;

    alertFunc(scrollXPer);
  }

  //   꼽사리 로딩바 퍼센트별로 적용되는 함수
  function alertFunc(scrollXPer) {
    if (scrollXPer === 0) return (alert.innerHTML = '"우주선 로딩바 만들기"');
    if (scrollXPer === 60)
      return (alert.innerHTML = '"조심해! 잘못 건드리면 우린 끝장이야!!.."');
    if (scrollXPer > 20 && scrollXPer < 50)
      return (alert.innerHTML = '"어어!! 저거 뭐야!!? 온다아아!!"');
    if (scrollXPer > 80)
      return (alert.innerHTML = '"갔나.. 정말 무시무시하군.."');
  }

  //   스크롤 이벤트를 등록해주는 리스너
  window.addEventListener("scroll", scrollFunc);
})();

 

완성본 이미지

배경 이미지를 따로 추가하거나, 프로그래스 바 진행비율에 따라 배경이나 글자를 달리하거나 애니메이션을 적용해서 급박한 상황을 실감나게 연출하거나 다양하게 활용 가능하다.