If you can't fly then run, if you can't run then walk, if you can't walk then crawl, but whatever you do you have to keep moving forward.
날개가 없다면 달리라. 달릴 수 없다면 걸어라. 걸을 수 없다면 기어라. 그러나 무엇이든 앞으로 나아가야 한다.
안녕하세요! 토미타미입니다. 오늘은 티스토리 블로그 꾸미기 관련해서 위로 가기 버튼과 진행 바 (progress bar)를 구현해보려고 합니다. 위로 가기 버튼은 예전부터 사용하고 있던 게 있어서 버튼 테두리에 스크롤 내려감에 따라 늘어나는 프로그레스 바를 적용시켜보겠습니다. 최근에 위로 가기 버튼에 프로그레스 바를 같이 접목시켜서 사용하는 웹 사이트를 봤는데. 남들이 많이 적용하는 헤더 부분이 아니라 되게 괜찮고 유니크해 보였어요. 요즘 구현해보고 싶은 건 많은데. 소스 찾기도 어렵고 잘 안돼서 짜증이 났었는데. 이번엔 비교적 쉽게 소스 찾고 적용할 수 있어서 다행인 거 같습니다. 그럼, 위로 가기 버튼과 프로그레스 바가 함께 나오도록 구현하는 방법 알려드리도록 하겠습니다.
함께 보면 좋은 포스팅:
[일상다반사/블로그] - [티스토리 블로그] HTML코드로 오디오/음성 파일 만들기
[일상다반사/블로그] - [티스토리 블로그] 목차를 이용해서 해당 소제목으로 바로 이동시키기
CSS 추가
CSS를 먼저 추가해주도록 하겠습니다. [관리자-스킨편집-HTML편집-CSS]로 간 다음에 제일 하단에 아래 있는 값을 복사해서 붙여 넣기 해주도록 하겠습니다. 버튼 위치는 오른쪽 하단에 고정해뒀기 때문에 다른 위치로 옮기려면 gotop에 bottom과 right부분을 변경해주시면 됩니다.
그 외 배경 색상은 gotop에 있는 background 부분을 변경해주시면 되고 텍스트 색상은 top-btn에 color 부분을 변경해주세요. hover는 마우스는 갖다 댔을때 애니메이션과 변경되는 색상이고 동일하게 background를 변경해주시면 돼요.
/* 위로 버튼&프로그레스 바*/
.gotop {
width: 70px;
height: 70px;
position: fixed;
bottom: 45px;
right: 45px;
font-weight: bold;
color: #f3c4d9;
border-radius: 50%;
background: #ffffff80 !important;
box-shadow: 0 0 15px #4f839750;
text-align: center;
line-height: 60px !important;
font: normal 16px "InkLipquid";
transition: all .8s;
cursor: pointer;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
}
.gotop:hover{
animation: btn-top 3s infinite;
color: #fff;
font-weight: bold;
background: #f3c4d9 !important;
}
@keyframes btn-top {
0% {transform: scale(1);}
25% {transform: scale(.8);}
50% {transform: scale(1.1);}
75% {transform: scale(.8);}
100% {transform: scale(1);}
}
.progress-circle {
width: 70px !important;
height: 70px !important;
position: fixed;
bottom: 40px;
right: 40px;
display: flex;
text-align: center;
visibility: hidden;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.is-visible {
visibility: visible;
opacity: 1;
}
.top-btn {
position: absolute;
width: 50px;
height: 50px;
font-size: 20px;
line-height: 50px;
color: #f3c4d9 !important;
right: 10px;
top: 8px;
}
.top-btn:hover{
color: #fff !important;
font-weight: bold;
}
HTML편집
자! CSS까지 추가 완료했고 이제 HTML 편집만 하면 위로 가기 버튼과 프로그레스 바 구현이 끝나네요. 아래 코드블록에 있는 값을 복사해서 [관리자-스킨편집-HTML편집-HTML]에 들어가 주세요. 위치는 오른쪽 하단으로 고정시켜 놨기 때문에 <body> 안쪽이라면 어디든 넣어도 상관없지만 찾기 쉽게끔 </body> 바로 위에 붙여 넣기 해주시면 될 거 같네요. 선 색상이나 굵기 같은 프로그레스 바에 대한 설정은 여기서 변경하실 수 있습니다. 진행 바 색상은 표시해둔 fgColor부분을 변경해주시면 되고 진행 바 선 굵기는 thickness를 변경하시면 됩니다.
<!--위로버튼&프로그레스바-->
<div class="progress-circle">
<div class="gotop">
<span class="dial"></span>
<a class="top-btn">top</a>
</div>
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/jquery.knob.min.js"></script>
<script>
$(document).ready(function() {
var offset = 100,
scroll_top_duration = 700,
$go_top = $('.gotop'),
$thedial = $('.dial'),
$progress_circle = $('.progress-circle');
// Initialize the progress dial
$thedial.knob( {
'min' : 0,
'max' : 100,
'width' : 70,
'height' : 70,
'bottom' : 300,
'fgColor' : '#d31919',
'skin' : 'tron',
'thickness' : .08,
'displayInput' : false,
'displayPreview' : false,
'readOnly' : true
});
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $progress_circle.addClass('is-visible') : $progress_circle.removeClass('is-visible');
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d-c)) * 100;
$('.dial').val(scrollPercent).change();
});
//위로 가기
$go_top.on('click', function(e) {
e.preventDefault();
$('body,html').animate( {
scrollTop: 0 ,
}, scroll_top_duration);
});
});
</script>
<!--위로버튼&프로그레스바 끝-->
적용된 모습보기
적용된 모습을 확인해보고 마무리하겠습니다. 저는 hover 부분 설정할 때 변경 전 폰트 색이 배경으로 바뀌게 애니메이션을 설정하는 게 되게 깔끔하고 이쁜 것 같더라고요. 개인 취향이니까 ㅎㅎ. 변경하실 분은 변경해주시면 되고 스크롤에 따라 진행 바가 버튼 기준으로 늘었다 줄었다 하네요. 잘 적용된 것 같습니다. 처음에 가운데 글씨가 적용이 안돼서 꽤나 고생했어요..ㅎㅎ 생각보다 금방 해결됐지만! 위로 가기 버튼과 프로그레스 바 구현 끝! 블로그 이쁘게 꾸미는데 도움이 되셨으면 좋겠네요~!
+추가
왜인지 모르겠지만 아래 코드블럭으로 복사하면 제대로 적용이 안되는 현상을 발견했습니다. 아래 텍스트 파일 다운받으시고 그대로 드래그해서 복사 붙여넣기 해주세요!
'일상다반사 > 블로그' 카테고리의 다른 글
| 무료 고퀄리티 블로그 로고 만들기 (Feat. WIX LOGO MAKER) (0) | 2022.09.15 |
|---|---|
| [티스토리] 본문내용 숨기기/펼치기 하는 방법! Java script 아님 (7) | 2022.07.25 |
| [티스토리] 본문 소제목 꾸미기 : 쉽게 내용 구분하고 가독성도 높이자! (6) | 2022.06.24 |
| [티스토리] 상단 헤더(header)에 검색창 구현하기 (4) | 2022.06.13 |
| [티스토리 블로그] 본문 이미지 테두리 적용하기 (9) | 2022.06.02 |