[개취존중] 데굴데굴 굴러가는 Progress bar를 만들어보자 🤩

 

 

안녕하세요 !

 

이번 포스팅에서는 현재 제 블로그에서 사용하고 있는 이미지가 굴러가는 듯한 애니메이션의 Progress bar를 만든 방법을 공유합니다.

 

외부 라이브러리 조금과, 간단한 제이쿼리 기능만 사용하면 아주 쉽게 추가할 수 있습니다!

 

 

---

잠깐!😳

이번 포스팅은 다음을 전제로 합니다.

 

1. 데굴데굴 굴러갈 커여운 이미지가 준비되어 있다.

    - 스크롤에 따라 0~360도까지 회전하기 때문에 원형에 가까울 수록 좋습니다.

2. 페이지 소스에 제이쿼리가 적용되어 있다.

    - 저의 블로그에는 jQuery v3.3.1이 cdn으로 적용되어 있습니다.

3. June의 prognroll.js를 적용하는 포스팅(https://enfanthoon.tistory.com/156)을 보고왔다.

---

 

 

 

1. prognroll 붙이기

 

위의 링크로 남겨놓은 포스팅을 참고하시면 되나, 커스텀에서 color를 배경색과 같이 지정해 주어야 합니다.

(progress bar에 의해 게시글이 과하게 가려지는 느낌이 드는 것을 피하기 위해서입니다)

 

이 부분은 prognroll을 붙일 때 지정할 수 있는데요. 저는 배경색이 하얀 색이기 때문에 white로 설정하였습니다.

(취향에 따라 다른 색을 선택하고 opacity를 깊게 주시는 것도 괜찮습니다)

 

두께 같은 경우 height 수치를 이용하여 커스텀이 가능하여 저는 60px으로 지정하였습니다.

$("{progress bar를 붙일 곳}").prognroll( {height:60, color:"white"} );

 

 

 

---

 

 

2. 요소 덧붙이기

 

prognroll.js의 코드를 뜯어보면, 'bar'라는 class의 progress bar를 동적으로 스타일을 지정하여 만들어 주는 코드라는 걸 알 수 있습니다.

 

👇 길지 않은 코드이니 여기를 참고해보세요

https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js

 

따라서, 이미지가 굴러갈 공간을 마련해 주기 위해, 임의의 div 요소를 덧붙일 겁니다.

제이쿼리의 append()를 활용하여 다음과 같이 붙여 줍시다.

 

$(".bar").append(
"<div class='bar-container' id='bar-container'><img src='{이미지 소스}'/> </div>");

(클래스 이름은 아무렇게나 하셔도 무방합니다)

 

 

 

그리고 스타일을 적용해 줍시다.

 

우선 .bar에서 progress bar가 게시글을 너무 가리지 않게 opacity 수치를 주고, 하단에만 테두리를 적용하였습니다.

.bar { 
	border: 2px solid #444; 
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	opacity: 80%;
}

 

 

 

bar-container는 다음과 같이 적용해 줍시다.

.bar-container {
    float: right;
}

 

 

기본적으로 우리가 추가한 요소는 bar 요소 안에 종속되어 있습니다.

prognroll의 bar는 스크롤에 따라서 width값이 동적으로 늘어나면서 bar가 진행되는 것 처럼 보이게 만든 것이기 때문에

하위 요소인 bar-container를 float: right 으로 오른쪽에 쏠리게 만들면 스크롤을 내릴 때 마다 오른쪽으로 나아가는 것 처럼 보이게 됩니다.

 

 

그 다음에는 하위 img의 max-height을 제한해 줍시다.

 

이때 prognroll을 커스텀 할 때 막대의 높이를 어느정도로 했는지가 중요한데요. 저 같은 경우는 막대의 높이를 60으로 지정했었기 때문에

이미지가 회전하면서 요소 바깥에 걸치거나 침범하지 않게 img의 max-height을 50정도로 지정하였습니다.

.bar-container img{
    max-height: 50px;
}

 

물론 반응형으로 구현하려면 미디어 쿼리 같은 것을 이용하여 작은 기기에서는 수치를 더 줄이면 좋겠죠?

 

 

 

 

3. 스크롤에 따라 회전하기

 

여기까지 오셨으면 이미지가 progress bar의 진행에 따라 오른쪽으로 나아가겠지만 아직 회전하지는 않습니다.

이제 스크롤 이벤트 리스너를 추가하여 스크롤에 따라 이미지에 회전값을 줘 봅시다.

 

 

window.addEventListener('scroll', () => {
	let scrollLocation = parseInt(document.documentElement.scrollTop); // 현재 스크롤바 위치
	let fullHeight = parseInt(document.body.scrollHeight); // 전체 높이(margin 포함 x)
    	let repeat = 5; // 얼마나 빠르게 회전할지
	let degree = parseInt((scrollLocation)/fullHeight * 360) * repeat;
	let _deg = degree + 'deg';
	
	$('#bar-container').css('transform','rotate('+ _deg +')');
})

 

스크롤 이벤트가 발생할 때 마다, 현재 스크롤 값과, 전체 높이를 계산합니다.

 

transform의 rotate 값을 주면 ' 'deg에 맞게 0~360도로 요소가 회전하기 때문에,

현재 스크롤 값/전체 높이 비율을 계산하여 %로 나타내 회전값에 적용시키는 것입니다.

 

단, 이 때 그냥 이대로만 적용한다면 스크롤을 최대로 내릴 동안 이미지가 한 번 밖에 회전하지 않게 됩니다.

그래서 저는 repeat값을 따로 주어 이미지가 훨씬 더 빠르게 회전하는 것 처럼 보이게 설정하였습니다.

 

이미지가 370도로 회전하면, 그냥 10도로 회전했을 때와 같계 보이기 때문에 단순히 일정 수치를 곱하기만 하면 보다 더 빠르게 굴러가는 것 처럼 보이게 됩니다.

 

 

 

이렇게 리스너를 적용하고 화면을 확인해 볼까요?

 

애니메이션 효과라기엔 많이 부족하지만, 그래도 원하던 대로 이미지가 굴러가는 듯 한 느낌이 들게 구현이 되었습니다!

좀더 둥근 이미지를 사용했으면 좋았을 것 같네요 😥

회전값이나 이미지, bar 두께는 모두 커스텀이 가능하니 원하시는 대로 맞춰 사용하시면 될 것 같습니다!

 

 

 

 

 

 

 

 

아 재밌어

 

 

 

 

 

이상으로 포스팅을 마칩니다.

 

 

 

 

 

출처]

https://mburakerman.com/prognroll/