2021. 3. 15. 19:29ㆍ재미있는 웹
위의 영상과 같이 스크롤 값을 통해서 뒷 배경의 변화를 주는 페이지를 만들어보겠습니다.
이 부분의 핵심은 위의 배경들을 fixed로 고정 한 다음 스크롤 값에 따라서 opacity를 변화를 주어 어둡게 만들어 주는 것입니다.
우선 html코드와 css코드를 확인해봅시당.
<css>
body{
margin: 0;
padding: 0;
overflow-x: hidden;
}
section.titleWrap{
position: fixed;
height: 800px;
width: 100%;
top: 0;
left: 0;
}
h1{
position: absolute;
color: #eee;
text-align: center;
width: 100%;
font-size: 50px;
margin-top: 320px;
z-index: 1;
}
.cover{
position: fixed;
width: 100%;
height: 800px;
background-color: rgba(0, 0, 0, 1);
}
.coverImg{
position: fixed;
width: 100%;
height: 800px;
background: url(bg2.png) center center / cover;
}
section.textWrap{
position: relative;
width: 100%;
margin-top: 800px;
padding: 100px;
background-color: #fff;
z-index: 1;
}
.innerWrap{
width: 60%;
margin: 0 auto;
}
p {
color : #111;
font-size : 15px;
line-height: 28px;
margin-bottom : 80px;
}<html>
<body>
<section class="titleWrap">
<div class="coverImg"></div>
<div class="cover"></div>
<h1>스크롤을 통해 배경 변화주기</h1>
</section>
<section class="textWrap">
<div class="innerWrap">
<h2>스크롤 프로그레시브 바</h2>
</div>
</section>
</body>css 코드를 보면 title Wrap의 경우 h1을 제외한 다른 코드들은 fixed로 지정해준 것을 확인할 수 있습니다. fixed 외부의 어느 값이랑 연관 관계 없이 위치를 고정으로 지정해줄 수 있습니다.
커버 이미지의 경우 background: url을 뒷 배경 이미지를 선택할 수 있고
위치를 고정으로 만든 다음 앞으로 나와서 보이게 만들기 위해 z-index를 설정해주어야 합니다.
그런 다음 아래의 postion은 relative로 설정해줍니다. relative로 설정했기 때문에 특정 위치의 값으로 부터 어느정도 움직이는 정도를 보여줄 수 있습니다.
그런 다음 js 코드를 봅시다.
let coverImg, cover;
let scrollTop = 0;
let h1;
window.onload = () => {
coverImg = document.getElementsByClassName("coverImg")[0];
h1 = document.getElementsByTagName("h1")[0];
cover = document.getElementsByClassName("cover")[0];
cover.style.opacity = .3;
}
window.addEventListener("scroll", (e)=>{
scrollTop = document.documentElement.scrollTop;
h1.style.transform = "translate(0,"+ -scrollTop/10 +"px)";
coverImg.style.transform = "scale("+ (1 + scrollTop/1000) +")";
// coverImg.style.transform = `rotate(${(1 + scrollTop/5)}deg)`;
cover.style.opacity = .3 + scrollTop / 1000;
});js 코드로는 크게 init을 해주는 부분, 그리고 scroll을 해주는 이벤트 부분 두개로 나누어서 볼 수 있습니다.
우선 스크롤의 경우에는 scrollTop의 값을 가져오고 변화되는 값에 따라 다른 transform을 주고있습니다. h1 글자의 경우에는 fixed가 아닌 absolute이기 때문에 y의 위치가 -로 가고 있습니다.
또한 스케일 값을 적절한 크기로 변화를 주기 위해서 /1000을 나누어 주었고 rotate의 주석을 풀게될 경우 회전하는 사진을 볼 수 있습니다.
opacity는 /1000으로 나누어진 값을 더해 주어서 어둡기에 변화를 주고 있습니다.
'재미있는 웹' 카테고리의 다른 글
| 스크롤을 통해서 게이지 변환 보기(html, css, js) (0) | 2021.03.14 |
|---|---|
| 마우스 이동에 따라 사진 움직이기(html, css, js) (0) | 2021.03.14 |
| 마우스 커서 만들기(html, css, js) (0) | 2021.03.14 |