스크롤을 통해서 게이지 변환 보기(html, css, js)
2021. 3. 14. 19:04ㆍ재미있는 웹
이번에는 뉴스나 특정 페이지를 보면 스크롤을 내릴 수록 얼마나 글을 읽었는지 등의 정보를 확인할 수 있는 프로그레시브 바를 만들겠습니다.
우선 글을 만들기 위해 더미 한글을 만들겠습니다.
한글입숨 - 무의미한 한글 텍스트 생성기
한글판 로렘입숨. 무의미한 한글 텍스트를 생성해 줍니다.
hangul.thefron.me
body{
margin: 0;
display: flex;
justify-content: center;
}
.textSection{
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
background-color: brown;
padding: 0 10%;
color: antiquewhite;
}
.progressive{
position: fixed;
z-index: 100;
width: 100%;
height: 5px;
background-color: white;
}
.bar{
position: fixed;
height: 5px;
background-color: skyblue;
}html
<body>
<div class="progressive">
<span class="bar"></span>
</div>
<div class="textSection">
<h2>스크롤 프로그레시브 바</h2>
<p>창공에 살 청춘은 반짝이는 크고 가치를 불러 뿐이다. 무엇을 같은 귀는 것이다. 때까지 위하여서 청춘이 같으며, 튼튼하며, 부패뿐이다. 그들의 열매를 할지니, 끓는 아름답고 용기가 약동하다. 천자만홍이 이것이야말로 청춘은 창공에 청춘에서만 우리 목숨을 보라. 사랑의 위하여, 봄날의 천자만홍이 열락의 고행을 곳이 아니더면, 오직 운다. 청춘 소리다.이것은 그들에게 없으면 밥을 반짝이는 할지라도 그러므로 찾아다녀도, 부패뿐이다. 길을 이상 웅대한 못할 타오르고 말이다. 곳으로 힘차게 인간에 따뜻한 시들어 눈이 주는 소리다.이것은 힘있다. 창공에 웅대한 곳이 아니더면, 있다.
이것을 인간에 우리는 그들은 군영과 공자는 황금시대다. 어디 그들의 인생에 얼음이 운다. 있는 옷을 귀는 봄바람이다. 구하지 그들은 쓸쓸한 소금이라 가장 길을 위하여서. 설레는 인생을 보는 청춘에서만 봄날의 부패를 소리다.이것은 있으랴? 인간의 무엇을 이는 웅대한 가는 그들은 것은 있는가? 미인을 힘차게 위하여 원대하고, 이것이야말로 천고에 풍부하게 쓸쓸하랴? 눈이 위하여 심장의 열락의 속잎나고, 주는 칼이다. 것은 튼튼하며, 밥을 위하여, 작고 천하를 인류의 피는 따뜻한 것이다. 것이 많이 대고, 곳이 소금이라 청춘의 것은 사막이다.
청춘은 기관과 피어나기 것은 품고 끓는 트고, 것이다. 영원히 것은 그들은 이 것이다. 때까지 되려니와, 우는 할지라도 창공에 인간은 광야에서 것이다. 크고 석가는 있는 기관과 그러므로 군영과 끓는다. 청춘이 봄날의 충분히 웅대한 뜨거운지라, 힘차게 있다. 대중을 영락과 살았으며, 얼마나 무엇이 봄바람이다. 장식하는 남는 불어 보배를 어디 것은 것이다. 인간은 인생에 얼음 황금시대를 구할 봄바람이다. 있으며, 발휘하기 기관과 구할 찬미를 풀이 인생을 동산에는 말이다. 무엇이 실로 고동을 심장의 작고 따뜻한 현저하게 위하여서. 것이다.보라, 목숨이 이상의 봄바람이다.</p>
<p>창공에 살 청춘은 반짝이는 크고 가치를 불러 뿐이다. 무엇을 같은 귀는 것이다. 때까지 위하여서 청춘이 같으며, 튼튼하며, 부패뿐이다. 그들의 열매를 할지니, 끓는 아름답고 용기가 약동하다. 천자만홍이 이것이야말로 청춘은 창공에 청춘에서만 우리 목숨을 보라. 사랑의 위하여, 봄날의 천자만홍이 열락의 고행을 곳이 아니더면, 오직 운다. 청춘 소리다.이것은 그들에게 없으면 밥을 반짝이는 할지라도 그러므로 찾아다녀도, 부패뿐이다. 길을 이상 웅대한 못할 타오르고 말이다. 곳으로 힘차게 인간에 따뜻한 시들어 눈이 주는 소리다.이것은 힘있다. 창공에 웅대한 곳이 아니더면, 있다.
이것을 인간에 우리는 그들은 군영과 공자는 황금시대다. 어디 그들의 인생에 얼음이 운다. 있는 옷을 귀는 봄바람이다. 구하지 그들은 쓸쓸한 소금이라 가장 길을 위하여서. 설레는 인생을 보는 청춘에서만 봄날의 부패를 소리다.이것은 있으랴? 인간의 무엇을 이는 웅대한 가는 그들은 것은 있는가? 미인을 힘차게 위하여 원대하고, 이것이야말로 천고에 풍부하게 쓸쓸하랴? 눈이 위하여 심장의 열락의 속잎나고, 주는 칼이다. 것은 튼튼하며, 밥을 위하여, 작고 천하를 인류의 피는 따뜻한 것이다. 것이 많이 대고, 곳이 소금이라 청춘의 것은 사막이다.
청춘은 기관과 피어나기 것은 품고 끓는 트고, 것이다. 영원히 것은 그들은 이 것이다. 때까지 되려니와, 우는 할지라도 창공에 인간은 광야에서 것이다. 크고 석가는 있는 기관과 그러므로 군영과 끓는다. 청춘이 봄날의 충분히 웅대한 뜨거운지라, 힘차게 있다. 대중을 영락과 살았으며, 얼마나 무엇이 봄바람이다. 장식하는 남는 불어 보배를 어디 것은 것이다. 인간은 인생에 얼음 황금시대를 구할 봄바람이다. 있으며, 발휘하기 기관과 구할 찬미를 풀이 인생을 동산에는 말이다. 무엇이 실로 고동을 심장의 작고 따뜻한 현저하게 위하여서. 것이다.보라, 목숨이 이상의 봄바람이다.</p>
<p>창공에 살 청춘은 반짝이는 크고 가치를 불러 뿐이다. 무엇을 같은 귀는 것이다. 때까지 위하여서 청춘이 같으며, 튼튼하며, 부패뿐이다. 그들의 열매를 할지니, 끓는 아름답고 용기가 약동하다. 천자만홍이 이것이야말로 청춘은 창공에 청춘에서만 우리 목숨을 보라. 사랑의 위하여, 봄날의 천자만홍이 열락의 고행을 곳이 아니더면, 오직 운다. 청춘 소리다.이것은 그들에게 없으면 밥을 반짝이는 할지라도 그러므로 찾아다녀도, 부패뿐이다. 길을 이상 웅대한 못할 타오르고 말이다. 곳으로 힘차게 인간에 따뜻한 시들어 눈이 주는 소리다.이것은 힘있다. 창공에 웅대한 곳이 아니더면, 있다.
이것을 인간에 우리는 그들은 군영과 공자는 황금시대다. 어디 그들의 인생에 얼음이 운다. 있는 옷을 귀는 봄바람이다. 구하지 그들은 쓸쓸한 소금이라 가장 길을 위하여서. 설레는 인생을 보는 청춘에서만 봄날의 부패를 소리다.이것은 있으랴? 인간의 무엇을 이는 웅대한 가는 그들은 것은 있는가? 미인을 힘차게 위하여 원대하고, 이것이야말로 천고에 풍부하게 쓸쓸하랴? 눈이 위하여 심장의 열락의 속잎나고, 주는 칼이다. 것은 튼튼하며, 밥을 위하여, 작고 천하를 인류의 피는 따뜻한 것이다. 것이 많이 대고, 곳이 소금이라 청춘의 것은 사막이다.
청춘은 기관과 피어나기 것은 품고 끓는 트고, 것이다. 영원히 것은 그들은 이 것이다. 때까지 되려니와, 우는 할지라도 창공에 인간은 광야에서 것이다. 크고 석가는 있는 기관과 그러므로 군영과 끓는다. 청춘이 봄날의 충분히 웅대한 뜨거운지라, 힘차게 있다. 대중을 영락과 살았으며, 얼마나 무엇이 봄바람이다. 장식하는 남는 불어 보배를 어디 것은 것이다. 인간은 인생에 얼음 황금시대를 구할 봄바람이다. 있으며, 발휘하기 기관과 구할 찬미를 풀이 인생을 동산에는 말이다. 무엇이 실로 고동을 심장의 작고 따뜻한 현저하게 위하여서. 것이다.보라, 목숨이 이상의 봄바람이다.</p>
......
</div>
</body>
위의 progressive나 bar들은 위치를 fixed로 고정하고 z-index를 앞으로 해서 보이게 만들어줍니다.
그런 다음 bar또한 같은 위치에 존재하게 하고 스크롤 값을 받아와서 전체 크기의 비중을 %이로 만들어서 width에 넣어줍니다.
(document.body.scrollHeight - window.outerHeight)
이전에는 outerHeight까지 포함한 거리까지 %를 구해주었는데 outerHeight를 빼고 남은 거리 만큼의 %를 구할 수 있다. 따라서 프로그레시브 바가 온전히 꽉차는 것을 볼 수 있습니다.
let scrollTop = 0, bar;
const scrollEvent = (e) =>{
console.log(document.body.scrollHeight, window.outerHeight);
scrollTop = document.documentElement.scrollTop;
let per = Math.ceil(scrollTop/(document.body.scrollHeight - window.outerHeight)* 100);
bar.style.width = per+'%';
}
window.onload = ()=>{
bar = document.getElementsByClassName("bar")[0];
}
window.addEventListener("scroll", scrollEvent);
window.addEventListener에 scroll 이벤트를 등록하고 width에 percentage에 등록해준다. bar 클래스 네임을 bar 객체에 등록해준다.
'재미있는 웹' 카테고리의 다른 글
| 스크롤을 통해 블로그 뒷배경 이미지 만들기(html, css, js) (0) | 2021.03.15 |
|---|---|
| 마우스 이동에 따라 사진 움직이기(html, css, js) (0) | 2021.03.14 |
| 마우스 커서 만들기(html, css, js) (0) | 2021.03.14 |