난 글의 어느 지점에 와 있을까?
다른 사람들의 블로그를 읽고 있다보면,
앞으로 남은 글의 분량이 얼마인지 궁금할 때가 있습니다.
앞으로 남은 글의 분량이 얼마인지 궁금할 때가 있습니다.
긴 글은 대충대충 읽기도 하고,
지금 읽고 있는 부분이 본론인지 도입인지 궁금할 때가 있기도 합니다.
지금 읽고 있는 부분이 본론인지 도입인지 궁금할 때가 있기도 합니다.
제 블로그를 방문하는 다른 분들도 마찬가지겠죠?
화면을 내릴때, 내 지금 위치가 전체 글의 어느 지점에 와 있을지를 시각적으로 표현해보고 싶습니다. .
화면 상단에 스크롤 진행 표시바를 달 수 있습니다.
아래 사진을 보시면,
혹은 제 블로그의 상단을 보시면 진행 바를 보실 수 있습니다.
혹은 제 블로그의 상단을 보시면 진행 바를 보실 수 있습니다.
위의 노란색 부분 막대는 화면 아래로 내려갈 수록 오른쪽으로 채워지고,
스크롤이 끝나는 지점에 가면, 저 막대가 화면 끝까지 채워집니다.
진행상황을 알려주는 막대 바입니다.
설치 방법은?
이 번에도 구글 블로그(블로그 스팟, Blogspot)의 관리 페이지에서 시작합니다.
관리자 페이지 → 레이아웃 → 가젯추가의 메뉴에서 HTML/JavaScript 가젯을 선택한 후,
코드를 복사/붙여 넣기 하시면 됩니다.
상세한 설명을 원하시는 분은 제 다른 포스트의 아래 항목을 참조해주세요.
참조글 :
구글 블로그 꾸미기 13- 구글 블로그(블로그스팟, Blogspot)의 레이아웃의 활용(다양한 가젯(위젯) 및 HTML/자바스크립트 추가하기)
참조 섹션 : 7. Html/자바스크립트 가젯(위젯) 설치
HTML/자바스크립트 코드
코드는 아래 펼쳐보기 박스에서 확인 하실 수 있습니다.
HTML/자바스크립트 코드 확인
<style>
#readingProgress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
background-color: #555;
z-index: 9999;
transition: width 0.25s ease-out;
}
</style>
<div id="readingProgress"></div>
<script>
window.addEventListener("scroll", function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
var scrollPercent = (scrollTop / scrollHeight) * 100;
document.getElementById("readingProgress").style.width = scrollPercent + "%";
});
</script>
맺음말
해당 코드는 PC에서는 물론 모바일 웹브라우저에서도 잘 작동합니다.
사람은 본능적으로 예측불가능 한 것보다는 예측 가능한 것을 좋아합니다.
글 읽기에서도 종이책은 끝까지 남은 부분을 알수 있다는 점이
남은 지점을 예측하기가 어려운 전자책보다는 독자들에게 친근한 환경을 제공합니다.
블로글에서도 이런 인간의 심리가 반영될 수 있기를 기대해봅니다.
댓글 쓰기