지난 상단 헤더 꾸미기 게시글이 꾸준히 유입률 1위를 담당하고 있어서 작성해보는 2탄 ( •̀ ω •́ )y
이번 꾸미기는 아래가 둥근 상단박스 헤더(스크롤에 따라 색 변화) + 진행바 를 만들어보겠습니다.
헤더를 변경한지 오래되어 어떤 순서로 얼만큼 수정했는지 기억이 가물하지만..
최종 수정한 HTML 코드와 CSS 를 남겨둘테니 참고해주시면 감사하겠습니다!
기본 템플릿은 [ Odyssey ] 를 사용했고 이전 상단 헤더 꾸미기 1탄을 바탕으로 진행됩니다.
1. 아래가 둥근 헤더 박스
기존의 상단을 가득 채운 네모 반듯한 상단바가 너무 딱딱한 느낌이 들어서
아래만 둥글게 깎아 부드러운 느낌을 주겠습니다.
.header 클래스의 속성을 바꿔주기 위해
스킨 편집 > HTML 편집 > CSS 탭에서 '/* header */' 를 검색해주세요.
그러면 바꿔야 할 .header 클래스가 바로 보입니다.
아래 두 점을 둥글게 만드는 부분은
border-radius: 0 0 15px 15px;
이 속성을 추가해주도록 합니다.
추가로 너비가 화면을 꽉 채우는 게 좀 답답해보이더라구요.
그래서 게시글 범위만큼만 차지하도록 변경했습니다.
width: 60% 로 전체 너비를 정해주고
left: 20%, right: 20%, margin: 0 auto; 로 가운데 위치하도록 했어요.
2. 스크롤을 내리면 색이 변하는 헤더
1번까지만 해도 색다르지만 저는 은근히 현란한 걸 좋아하기 때문에
스크롤을 내리면 이 헤더 색이 변하도록 수정해주겠습니다.
HTML 탭으로 가서 <head> 블럭 내 하단에 스크립트를 하나 추가해주겠습니다.
<script>
$(function () {
$(document).on('scroll', function(){
// 스크롤 시 header fade-in
if($(window).scrollTop() > 100){
$(".header").addClass("active");
}else{
$(".header").removeClass("active");
}
})
});
</script>은은하게 색이 바뀌도록 할 속성은 'active' 클래스명으로 줄 예정입니다.
현재 브라우저 창에서 스크롤 이벤트가 감지될 때
스크롤의 위치가 상단에서 100 이상이면(스크롤이 내려갔을 때) 헤더의 'header' 클래스에 'active' 클래스를 추가하고
그렇지 않을 경우(스크롤이 최상단에 위치해 있을 때) 'header' 클래스에 'active' 클래스를 제거한단 뜻입니다.
CSS 탭으로 돌아가서 'active' 클래스와 'header' 클래스에 속성을 더 추가해주겠습니다.
나눠서 보자면 먼저 기본 '.header' 클래스에서
background-color: #ffffff78; 평상시 배경색은 흰색 반투명으로
transition: width 0.5s ease, background-color 0.5s ease; 변화가 있을 때 너비값/배경색을 0.5초동안 기본 속도로 속성 전환.
.header::before before로 만들어진 그라데이션 배경[A]이 투명상태여서(opacity: 0) 흰색 반투명 배경[B]이 보여지고
스크롤을 내리면 B 위의 A가 불투명이 되어 보이게 되는 방식(transition: opacity 0.5s ease)
저는 흰색 불투명 배경을 초반색으로 두고 그라데이션 배경을 변화색으로 설정했다보니
before 요소에 너비 재설정까지 번잡함이 더해졌는데요.
단색 배경으로 하면 요 속성들은 달라질 수 있습니다.
.header.active 이 안에다 background-color, transition 을 주면 되지 않을까 싶긴한데..
이 경우는 제가 다시 테스트해서 글에 추가하도록 할게요!
3. 스크롤에 따른 진행바
글을 읽으며 스크롤을 내리다보면 내가 전체 글의 어느 만큼을 읽고 있는지, 얼만큼이 더 있는지 알려주는 방법으로
진행바는 사용자에게 줄 수 있는 작은 편의 중 하나죠.
현재 페이지의 전체 높이 대비 스크롤 위치에 따른 진행바를 헤더보다 더 상단에 붙여주겠습니다.
HTML 탭으로 이동해서 <header> 바로 위에 진행바를 위한 div 블럭을 하나 추가해줍니다.
그리고 위에서 헤더 색변화를 위해 추가 했던 스크립트에
진행바를 위한 코드도 추가해주세요.
<script>
$(function () {
$(document).on('scroll', function(){
// 스크롤 시 header fade-in
if($(window).scrollTop() > 100){
$(".header").addClass("active");
}else{
$(".header").removeClass("active");
}
// 상단 진행바
const scrollH = document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollW = (scrollH / height) * 100;
$(".progress-bar").css("width", scrollW+"%");
})
});
</script>.box-progress 클래스를 가진 div 가 진행바의 틀을 담당하고
.progress-bar 클래스를 가진 div 가 변화하는 막대를 담당합니다.
다음은 CSS 탭으로 이동해서 이 진행바를 꾸며주겠습니다.
신규로 작성해줄거라 위치는 편한 곳에 추가해주세요.
저는 header 위에 붙어있는 블럭이니 아까 작업한 '.header' 속성 위에 추가해줬습니다.
.box-progress와 .progress-bar에 있는 height: 4px; 은 막대의 두꺼운 정도를 결정하는데
이 값은 원하는대로 테스트해보면서 설정하시면 돼요.
스크롤에 따른 진행 막대(.progress-bar)의 너비값은 스크립트에서 변경해주게 됩니다.
✨ 그래서 완성된 헤더는! ✨
이렇게 헤더 꾸미기 2탄도 해봤는데요.
이번엔 각자 상황이나 스타일에 따라 css에서 다른점이 많을 것 같아요.
제꺼 그대로 따라했는데 색변화가 이상하다던지..⊙﹏⊙∥
그나마 상관없이 똑같이 되는 건 진행바 정도..?
도움이 되었다면 하트 살짝 눌러주시면 감사하겠습니다! ♥
그 외에 다른 팁이나 꾸미기 방식이 있다면 댓글 남겨주세요 :)
> 더보기 접은글: 수정한 html, css 코드 보기
- HTML | <head> 아래 코드블럭 내용 복붙 </head>
<script>
$(function () {
$(document).on('scroll', function(){
// 스크롤 시 header fade-in
if($(window).scrollTop() > 100){
$(".header").addClass("active");
}else{
$(".header").removeClass("active");
}
// 상단 진행바
const scrollH = document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollW = (scrollH / height) * 100;
$(".progress-bar").css("width", scrollW+"%");
})
});
</script>- HTML | <div id="wrap"> 이 바로 아래에 아래 코드블럭 내용 복붙
<!-- progress bar -->
<div class="box-progress">
<div class="progress-bar" id="indicator"></div>
</div>- CSS | 헤더와 진행바 클래스
/* progress bar */
.box-progress {
position: fixed;
top: 0;
z-index: 100;
width: 100%;
height: 4px;
background: #ffffff78;
}
.box-progress .progress-bar {
height: 4px;
border-radius: 5px;
background: linear-gradient(to right, rgba(201, 141, 201, 0.521), rgba(147, 141, 201, 0.527));
width: 0%;
}
/* header */
.header {
position: fixed;
background-color: #ffffff78;
width: 60%;
left: 20%;
right: 20%;
margin: 0 auto;
border-bottom: none !important;
box-shadow: 1px 1px 10px 0px #9999992e;
z-index: 10;
backdrop-filter: blur(5px);
border-radius: 0 0 15px 15px;
transition: width 0.5s ease, background-color 0.5s ease;
}
.header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(201, 141, 201, 0.29), rgba(147, 141, 201, 0.29));
opacity: 0;
transition: opacity 0.5s ease, width 0.5s ease;
z-index: -1;
border-radius: inherit;
color: white;
}
.header.active::before {
opacity: 1;
}
감사합니다.
'TIL > 블로그' 카테고리의 다른 글
| [웹][티스토리 블로그 꾸미기] 메신저 말풍선처럼 댓글 꾸미기 (5) | 2022.09.18 |
|---|---|
| [웹][티스토리 블로그 꾸미기] 상단 헤더 꾸미기 (7) | 2022.08.29 |