반응형
#1 Progress Indicator
진행 바, 상단 스크롤, 프로그래스 인디케이터, 프로그래스 바 등 다양하게 불리고 있는 스크롤에 따른 진행도를 표시해주는 선을 블로그에 삽입하는 방법입니다.
#2 블로그에 적용하기
HTML 편집에서 가장 아래쪽으로 이동한 후, 다음 코드를 복사하여 </body> 위쪽에 붙여 넣어주면 적용은 끝입니다.
<!-- Progress Indicator -->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script type="text/javascript">
$(function () {
$("body").prognroll({
height: 4,
color: "#180204"
});
$(".content").prognroll({custom: true});
});
</script>
중간에 보이는 height: 4 가 선의 굵기를, color: "#180204"가 선의 색상을 나타냅니다.
숫자만 바꿔주거나 ""안에 원하는 색상을 넣어주시면 쉽게 자신의 스타일로 수정할 수 있습니다.
#3 기타
이 항목은 신경 쓰지 않으셔도 됩니다.
HTML에 스크립트 계속 적히는거 싫어하는 스스로를 위해서(?) 만든 파일입니다.
파일 업로드 후, 다음 한줄만 삽입하면 작동.
<script src="./images/prognroll.js"></script>
반응형