<div class="card-background">
<div class="card-box">
<img src="카드이미지1경로">
</div>
<div class="card-box">
<img src="카드이미지2경로">
</div>
<div class="card-box">
<img src="카드이미지3경로">
</div>
</div>
.card-background {
height: 3000px;
margin-top: 50px;
margin-bottom: 1600px;
}
.card-box img {
display: block;
margin: auto;
max-width: 80%;
}
.card-box {
position: sticky;
top: 200px;
margin-top: 200px;
transition : all 0.2s; // 애니메이션이 더 부드럽게 동작함
}
position: sticky를 활용하여 이미지 위치를 고정합니다.
$(window).scroll(function () {
var 높이 = $(window).scrollTop();
console.log(높이);
var y = (-1 / 250) * 높이 + 2;
var z = (-1 / 2500) * 높이 + 11 / 10;
if (높이 >= 250) {
$('.card-box')
.eq(0)
.css({
opacity: y,
// 250부터 500까지 스크롤바를 내리면 첫째 카드의 opacity 가 1에서 0으로 서서히 변경해주셈
transform: 'scale(' + z + ')'
// 250부터 500까지 스크롤바를 내리면 첫째 카드의 scale 가 1에서 0.9로 서서히 변경해주셈
});
}
});
직선 방정식을 활용하여 스크롤 위치에 따라 투명도와 크기가 변하는 코드를 짭니다.
'JavaScript' 카테고리의 다른 글
JavaScript(Switch 문법) (0) | 2023.05.26 |
---|---|
JavaScript(캐러셀에 스와이프 기능 넣기) (0) | 2023.05.25 |
JavaScript(Ajax, Array 자료) (0) | 2023.05.23 |
JavaScript(JS로 HTML 생성, forEach와 for in, arrow function) (0) | 2023.05.19 |
JavaScript(Array, Object 자료형, 문자 중간 변수 넣기) (0) | 2023.05.19 |