position: sticky;sticky를 이용해 보자.
<body style="background: grey; height: 3000px;">
<div class="grey">
<div class="image">
<img src="appletv.jpg" width="100%">
</div>
<div class="text">
sfjeifjwiflwejewljwelfjwelfwje fejwfljw
wejfewjflwel fewj lwejfw
wejflwejfkljl
wejflkwejflk
wejfklwj
</div>
</div>image는 float:right, position: sticky가 설정되어있고
text는 float:left가 설정되어 있다.
text가 왼쪽, image가 오른쪽으로 배치되었다
image는 sticky, top:100px로 설정을 해놓았기 때문에 스크롤해도 위에서 100px만큼 떨어진 위치에 고정되어있다.
이렇게 고정된 image는 부모태그 안에서 고정되어있게 된다.
(부모태그가 끝나면 같이 스크롤되어 올라감)
애플 홈페이지를 구경하다 보면
스크롤 이벤트를 정말 멋있게 구현해 둔게 많은데
그 중 하나를 따라해볼까 한다.
카드가 화면에 고정돼있고,
스크롤을 내리는 정도에 따라서
아래에서 새로운 카드가 올라온다.
이 때 기존에 있던 카드는 흐리게 처리되고 크기가 약간 줄어든다.
<div class="card-background">
<div class="card-box">
<img src="card1.png">
</div>
<div class="card-box">
<img src="card2.png">
</div>
<div class="card-box">
<img src="card3.png">
</div>
</div>우선 카드 박스 세개를 배치 해 두고,
.card-box {
position: sticky;
top: 400px;
margin-top: 200px;
transition: all 0.2s;
}카드 박스는 sticky 설정을 해 두었다.
$(window).scroll(function () {
var 높이 = $(window).scrollTop();
console.log(높이);
var y = (-1 / 500) * 높이 + 115 / 50;
$('.card-box').eq(0).css('opacity', y)
if (높이 > 650 && 높이 < 1150) {
var y_scale = (-1 / 5000) * 높이 + 1.13;
$('.card-box').eq(0).css('transform', `scale(${y_scale})`);
}
});그리고 스크롤이벤트를 작성하면 된다.
카드가 흐려지기 시작할 스크롤 위치를
scrollTop()으로 측정해서 console.log로 출력하여 값이 몇인지 확인 해 보자.
그리고 카드가 완전히 없어질 스크롤 위치도 확인 해 보자.
여기서는 scrollTop이 650일 때 점차 흐려지기 시작해서, scrollTop이 1150이 되면 완전히 없어지게 해야했다.
그럼 opacity값이 scrollTop:650일 때 == 1
opacity값이 scrollTop:1150일 때 ==0 이 되게 하기 위해서
1차 방정식을 짠다.
0=650 a + b
1=1150 a + b
-----------------위 식에서 아래 식을 빼면
-1=500a
=> a= -1/500 , b= 115/50이 나온다.
그럼 방정식이 opacity=(-1/500)*scrollTop() + (115/50)이 되므로
이 opacity값을 card-box에 적용 해주면 된다.
'웹개발 > JavaScript' 카테고리의 다른 글
| 슈팅게임 페이지 가꿔보기 (0) | 2023.02.05 |
|---|---|
| 자바스크립트로 슈팅게임을 만들다 (0) | 2023.02.04 |
| [자바스크립트] 브라우저 로컬 스토리지(localStorage)사용하기 (0) | 2023.02.02 |
| [자바스크립트] sort,map,filter (1) | 2023.02.02 |
| [자바스크립트] Ajax GET/POST (0) | 2023.02.02 |
댓글