마우스 스크롤시 문서 읽은 진행률을 알려주는 진행 프로그래스바 코드 소스에 대한 소개입니다.
우연히 다음 뉴스를 읽어보다가 마우스 스크롤을 내려보니 얼마나 읽었는지가 보여지니 사용자 입장에서 상당히 편하더라구요.
보통 scroll indicator라 하더라구요.
그래서 웹사이트에 어떻게 적용시킬까 찾아봤더니 html과 CSS, javascript를 적용시키면 되더라구요.
그럼 소스 적용 방법 먼저 설명드릴게요.
아래의 css 소스를 입력합니다.
.scrollindicator{
width: 100%;
height: 5px; /* height of progress bar */
display: block;
background: white;
left: 0;
top: 0; /* dock progress bar to bottom of page (change to "top" for top instead) */
cursor: pointer;
position: fixed;
z-index: 1000000;
visibility: hidden;
-webkit-transition: height .2s ease;
transition: height .2s ease;
}
.scrollprogress{
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, #00313C, #E31C79); /* background color of progress bar */
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
=-webkit-transition: -webkit-transform .4s ease;
transition: transform .4s ease; /* animate progress bar? Remove to disable */
}
<script>
jQuery(function($){
var growmouseover = [true, '25px'] // magnify progress bar onmouseover? [Boolean, newheight]
///////// No need to edit beyond here /////////
var $indicatorparts = $(document.body).append('<div class="scrollindicator"><div class="scrollprogress"></div></div>')
var $indicatorMain = $indicatorparts.find('div.scrollindicator')
var $scrollProgress = $indicatorparts.find('div.scrollprogress')
var indicatorHeight = $indicatorMain.outerHeight()
var transformsupport = $scrollProgress.css('transform')
transformsupport = (transformsupport == "none" || transformsupport =="")? false: true
function syncscrollprogress(){
var winheight = $(window).height()
var docheight = $(document).height()
var scrollTop = $(window).scrollTop()
var trackLength = docheight - winheight
var pctScrolled = Math.floor(scrollTop/trackLength * 100) // gets percentage scrolled (ie: 80 NaN if tracklength == 0)
$scrollProgress.css('transform', 'translate3d(' + (-100 + pctScrolled) + '%,0,0)')
}
if (transformsupport){
$indicatorMain.css('visibility', 'visible')
$indicatorMain.on('click', function(e){
var trackLength = $(document).height() - $(window).height()
var scrollamt = e.clientX/($(window).width()-32) * trackLength
$('html,body').animate({scrollTop: scrollamt}, 'fast')
})
if (growmouseover[0]){
$indicatorMain.on('mouseenter touchstart', function(e){
$(this).css('height', growmouseover[1])
e.stopPropagation()
})
$indicatorMain.on('mouseleave', function(e){
$(this).css('height', indicatorHeight)
})
$(document).on('touchstart', function(e){
$indicatorMain.css('height', indicatorHeight)
})
}
$(window).on("scroll load", function(){
requestAnimationFrame(syncscrollprogress)
})
}
})
</script>
마지막으로 본문 <body> 아래에 해당 html 소스를 입력합니다.
<div class="scrollindicator">
<div class="scrollprogress">
</div>
</div>
아래는 codepen에 적용시켜본 모습입니다.
See the Pen LdBYYb by kenshin (@parkgun) on CodePen.
잘 적용이 되었네요^^
위에 적용시킨 것은 프로그래스바를 다음 뉴스처럼 위쪽에 배치시킨거랍니다.
변경하려면 CSS 를 아래와 같이 하시면 되요.
.scrollindicator{ 에서 위치를 아래쪽으로 배치하려면 top: 0; 이 부분을 bottom: 0; 변경시키면 프로그래스바의 위치가 아래에 위치하게 됩니다.
.scrollindicator{ 에서 height: 7px; 이 부분의 크기를 변경시키면 프로그래스바의 크기(두께)가 변경이 됩니다.
.scrollprogress{ 에서 background: purple; 이 부분의 색깔을 변경시키면 원하는 색으로 변경이 되구요. 예전 포스팅에서 소개해드렸던 그라데이션으로도 적용이 된답니다.
그라데이션 css는 일전에 올려드렸던 아래 포스팅에서 참고하기기 바래요^^
어렵지 않죠?
그럼 슬기로운 웹생활 하시길 바라며 이상으로 마우스 스크롤시 문서 읽은 진행률을 알려주는 진행 프로그래스바 코드 소스에 대한 소개를 마칩니다.
메인 이미지 [출처] Free images by pngtree.com
'Smart' 카테고리의 다른 글
| 영어 it의 쓰임! it는 언제 쓰는가? 다양한 활용법 (0) | 2018.04.14 |
|---|---|
| 홈페이지나 웹페이지에 벚꽃 꽃잎 떨어지며 날리는 효과 html 소스 (5) | 2018.04.07 |
| 포토샵 사진 스케치(sketch) 효과 액션~ 진심 버튼만 눌러주면 끗~! (0) | 2018.03.30 |
| 뉴이스트w 공식 색상(색깔) 웹에서 css 그라데이션 적용 방법 (1) | 2018.03.25 |
| 목동고등수학학원 지식인 베스트 질답! 사다리타기 게임은 수학 함수 일대일대응 이다? (0) | 2018.03.24 |
