항상 웹 페이지 구현시 Scroll Progress Bar를 만들어보고 싶었다
내가 만들 프로젝트에도 한번 구현을 해보기위해서 먼저 연습할 코드를 찾아 보았다. 그리고 대충 수정해보기..
위의 페이지에 동영상으로도 설명이 되어있어서 금방 이해했다.
그리고 git으로 코드도 있어서 코드도 꼼꼼히 확인했다.
바꾼거라고는 색깔 밖에없음..
html {
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
body {
background: #ffffff;
padding: 5% 15%;
}
p {
font-size: 1.8rem;
}
p:first-of-type {
margin-top: 60px;
}
#progressBarContainer {
position: fixed;
z-index: 10;
background: rgba(255, 255, 255, 0.05);
width: 100%;
top: 0;
left: 0;
}
#progressBar {
background: linear-gradient(to left, rgb(255, 166, 166), rgb(126, 197, 255));
transform-origin: top left;
transform: scale(0, 0);
opacity: 0;
}
#progressBarContainer,
#progressBar {
height: 10px;
}