[Javascript/HTML] 스크롤 시 퍼센트 바/원 동작 개발

오브제 광고를 보다가 제가 스크롤을 내리면 동그라미에 내린 높이만큼 퍼센트가 채워지는 것을 보고

이 기능에 대해 알아보면 재밌겠다고 생각해서 글을 쓰게 되었습니다.

 

스크롤 시 퍼센트 바 기능 추가

<div id="progressBar"></div>

#progressBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0; /* 초기 너비는 0으로 설정 */
    height: 5px; /* 퍼센트 바의 높이 설정 */
    background-color: blue; /* 퍼센트 바의 배경색 설정 */
    z-index: 9999; /* 다른 요소 위에 표시하기 위해 z-index 설정 */
}

var windowHeight = window.innerHeight;
var pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', function() {
    // 현재 수직 스크롤 위치 가져오기
    var scrollTop = window.scrollY;
    var scrollPercent = (scrollTop / (pageHeight - windowHeight)) * 100; // 스크롤 위치의 백분율 계산
    updateProgressBar(scrollPercent);
});

function updateProgressBar(percent) {
    var progressBar = document.getElementById('progressBar');
    progressBar.style.width = percent + '%'; // 퍼센트 바의 너비 설정
}

 

1. windowHeight 는 창의 높이입니다.

2. pageHeigth 는 전체 페이지의 높이입니다.

3. scrollTop은 스크롤 했을 때의 y축 즉 높이의 위치 값입니다.

4. scrollPercent 값에서 pageHeight- windowHeight를 한 이유는 전체 높이에서 창의 높이를 빼야지 끝까지 내려간 높이가 나오기 때문입니다.

5. 이렇게 계산한 값을 style의 width 값에 할당하면 됩니다.

네이버 창을 열고 개발자 도구에서 header쪽에 bar를 추가하고 (div 태그)

css를 입히고

콘솔(console)창에 javascript 문장을 작성하면!

사진에 맨위에 파란색 바가 앞/뒤로 퍼센트에 따라 움직일 겁니다!

 

스크롤 시 퍼센트 원 기능 추가

 

<div id="circleContainer">
  <div id="circle"></div>
  <div id="percentText">0%</div>
</div>

#circleContainer {
  position: relative;
  width: 100px;
  height: 100px;
}

#circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(blue 0%, blue var(--percent), transparent var(--percent), transparent 100%);
  transform-origin: center;
  transform: rotate(-90deg);
}

#percentText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: white;
}

var windowHeight = window.innerHeight;
var pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', function() {
  // 현재 수직 스크롤 위치 가져오기
  var scrollTop = window.scrollY;
  var scrollPercent = (scrollTop / (pageHeight - windowHeight)) * 100; // 스크롤 위치의 백분율 계산
  
  updateCircleProgress(scrollPercent);
});

function updateCircleProgress(percent) {
  var circle = document.getElementById('circle');
  var percentText = document.getElementById('percentText');

  // --percent CSS 변수 설정
  circle.style.setProperty('--percent', percent + '%');

  // 퍼센트 텍스트 업데이트
  percentText.innerText = Math.round(percent) + '%';
}

이것도 같은 방법으로 진행하시면 됩니다!

 

1. div 태그를 추가합니다.

2. css를 작성합니다.

- conic-gradient() 함수는 CSS 그러데이션 함수 중 하나로, 원형 그러데이션을 생성합니다. 즉, 원의 중심에서부터 시작하여 그 반경으로 그라데이션을 적용합니다.

• blue 0%: 시작 지점에서부터 파란색으로 시작합니다.
• blue var(--percent): 파란색 그러데이션은 0%에서부터 --percent까지 적용됩니다. 이 부분은 내부 원의 파란색 그라데이션 부분입니다.
• transparent var(--percent): 투명한 그라데이션은 --percent에서부터 100%까지 적용됩니다. 이 부분은 외부 원의 투명한 그라데이션 부분입니다.
• transparent 100%): 마지막으로 외부 원의 끝 부분을 투명하게 설정합니다.

3. windowHeigth는 윈도우 창의 높이입니다.

4. pageHeigth는 전체 페이지의 높이입니다.

5. css에 저장한 퍼센트를 javascript로 지정해 주면 완성입니다.

 

 

사진 오른쪽 상단 보시면 원이 생겼죠?(글씨를 빨간색으로 변경한 겁니다.)

 

직접 만들어보시고 코드분석도 놓치지 말아요!

 

소감

궁금해서 해본 개발인데 배우는 것도 있어서 행복합니다.

요즘 들어 쓸데없는 걱정을 많이 하게 되는데, 지나가면 아무것도 아닌 것인데 굳이 이렇게 신경을 써야 할 필요가 없다고 생각합니다.

힘든 일이 있는데 피할 수 없다면 자신이 그 일을 짊어지고 앞으로 나아가면서 조금씩 해결해 나가면 된다고 생각합니다. 그러니 이 세상이 재밌고 미래가 기대되는 것 아니겠습니까 ㅎㅎ

모두 파이팅 하면서 멋진 미래를 만들어가 봐요.