StickyUI
<body>
<div class="card-background">
<div class="card-box">
<img src="card1.png" alt="" />
</div>
<div class="card-box"><img src="card2.png" alt="" /></div>
<div class="card-box"><img src="card3.png" alt="" /></div>
</div>
</body>
CSS
.card-background {
height: 3000px;
margin-top: 800px;
margin-bottom: 1600px;
}
.card-box img {
display: block;
margin: auto;
max-width: 80%;
}
.card-box {
position: sticky;
top: 200px;
margin-top: 100px;
/* transform: scale(1); */
transition: all 0.2s;
}
- 스크롤하기 위해서 높이를 길게 준다.
position:sticky
효과로 스크롤시 고정하도록 한다.
이때, 반드시 위치좌표 속성도 같이 줘야한다. (top:200px
)
JS
$(window).scroll(function () {
var 높이 = $(window).scrollTop()
// console.log(높이)
// 650~1150까지 스크롤바를 내리면, 첫째카드의 opacity를 1~0으로 서서히 변경해라
// var y = a * 높이 + b
// 높이가 650일때는 y가 1
// 1 = a * 650 + b;
// 0 = a * 1150 + b;
// a = -1 / 500
// b = 115 / 50
var y1 = (-1 / 500) * 높이 + 115 / 50
var y2 = (-0.1 / 500) * 높이 + 1.13
// console.log(y2)
$(".card-box").eq(0).css("opacity", y1)
$(".card-box").eq(0).css("transform", `scale(${y2})`)
})
높이(650~1150)가 변경됨에 따라 opacity
속성이 변해야 한다.
650~1150까지 스크롤바를 내리면, 첫째카드의 opacity를 1~0으로 서서히 변경해라
var y = a * 높이 + b
높이가 650일때는 y(opacity)가 1,
높이가 1150일때는 y(opacity)가 0
1 = a * 650 + b;
0 = a * 1150 + b;
a = -1 / 500
b = 115 / 50
var y1 = (-1 / 500) * 높이 + 115 / 50
$(".card-box").eq(0).css("opacity", y1)
Author And Source
이 문제에 관하여(StickyUI), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aksel26/StickyUI저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)