티스토리 상단 스크롤바(진행바, 프로그레스바) 넣는 방법
- Etc
- 2021. 5. 5. 18:43
반응형
반응형
최근 티스토리 스킨을 바꾸면서 며칠간 스킨 꾸미는 재미에 푹 빠져있습니다. 그동안 다른 분들의 티스토리 블로그에서 봤던 신기한 자바스크립트 효과를 제 블로그에도 하나둘씩 적용해보고 있습니다.
이번에는 스크롤을 내리면서 글을 읽을 때, 웹브라우저 주소창 밑에 가로로 스크롤바가 생기는 효과를 알아보겠습니다. 지금 이 글을 읽으시면서 스크롤을 한번 내려보세요! 브라우저 상단에 로딩되는 것처럼 스크롤바가 오른쪽으로 가는 것을 볼 수 있습니다. 정식 명칭은 프로그레스바(progress bar)인 것 같습니다. 저는 스크롤바나 진행바라는 이름도 괜찮은 것 같습니다.
고급스러운 기술이지만 블로그에 적용하는데는 20초도 안걸릴 정도로 매우 간단합니다.
이 프로그레스바는 자바스크립트로 효과를 낸 것인데요. 소스는 아래와 같습니다. 이 소스를 티스토리의 HTML편집화면에서 <head>와 </head> 사이의 적당한 공간에 붙여넣기만 하면 끝입니다. 저는 </head> 바로 윗부분에 넣었습니다.
<!--진행바 스크립트 시작-->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script type="text/javascript">
$(function() {
$("body").prognroll({
height: 5,
color: "#555"
});
$(".content").prognroll({
custom: true
});
});
</script>
<!--진행바 스크립트 종료-->
움직이는 스크롤의 두께는 height에 5로 적혀있는 숫자를 조정하면 되고, 스크롤 색상은 color에서 변경해주시면 됩니다. 참고로 색상은 구글에서 #000000(샵 공 여섯개 : 검정색)로 검색하신 후 마음에 드는 색상이 나오면 해당 숫자 코드를 사용하시면 됩니다.
반응형
'Etc' 카테고리의 다른 글
| 2021년 가상화폐의 엄청난 거래대금을 보면서 (4) | 2021.05.07 |
|---|---|
| 현재까지의 급여외 수익 정리. 파이프라인을 확장하고 키우자! (4) | 2021.05.07 |
| 티스토리 맨 윗부분으로 올라가는 화살표 스크롤버튼 넣는 방법 (0) | 2021.05.06 |
| 티스토리 본문글 밑줄에 두꺼운 형광펜 효과 주기 (8) | 2021.05.05 |
| 2021년 미국증시 휴장일, 주식 거래시간, 폐장일, 개장일, 서머타임 정리 (0) | 2021.05.05 |
| 티스토리 스킨과 본문에 무료 웹폰트 적용하는 간단한 방법(눈누, 구글폰트) (2) | 2021.05.05 |
| 티스토리 폰트 다양한 웹폰트로 변경하는 간단한 방법(티스토리 본문 글씨체 변경) (3) | 2021.05.03 |
| 티스토리 포트폴리오 스킨 수정. 본문 너비 조정. 본문 폭 넓히기 (0) | 2021.05.02 |