-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
스크롤 다루기 응용방법
21.08.08 23:28 작성 조회수 186
0
안녕하세요 쌤~
이 강의의 응용버전으로
스크롤을 내릴 때마다 element를 움직이게 하는 거는 어떻게 구현하는지 간단하게 설명 해주실 수 있나요?
답변을 작성해보세요.
0
1분코딩
지식공유자2021.08.23
window.pageYOffset으로 스크롤된 위치를 픽셀값으로 가져올 수 있는데요~
그 값에 원하는 값을 곱하거나 나누어서 적용하면 됩니다.
아래처럼 문서 전체 스크롤된 비율을 구해서 그 값을 이용해 transform이나 opacity 등에 이용해 볼 수 있고요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 500vh;
margin: 0;
}
.foo {
position: fixed;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
opacity: 0;
transform: translateY(100%);
}
</style>
</head>
<body>
<div class="foo"></div>
<script>
let scrollRatio;
const fooElem = document.querySelector('.foo');
window.addEventListener('scroll', () => {
scrollRatio = window.pageYOffset / (document.body.clientHeight - window.innerHeight);
fooElem.style.transform = `translateY(${100 - (100 * scrollRatio)}%)`;
fooElem.style.opacity = scrollRatio;
});
</script>
</body>
</html>
답변 1