-
<!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>
<link rel="stylesheet" href="css/33.스크롤위치에따라 변하는.css" />
</head>
<body>
<div class="card-background">
<div class="card-box">
</div>
<div class="card-box">
</div>
<div class="card-box">
</div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).scroll(function () {
var 높이 = $(window).scrollTop();
console.log(높이);//650 ~1150까지 스크롤바를 내리면, 첫째카드의 opacity 1~0으로 서서히 변경해주셈
var y = (-1 / 517) * 높이 + 4.017;
$(".card-box").eq(1).css("opacity", y);
var yScale = (-1 / 517) * 높이 + 3.6518181818;
$(".card-box").eq(1).css("transform",scale(${yScale}));
});
</script>
</body>
</html>0.9를 대입해서 계산을 했는데 이렇게 되는것같네요 오히려
0.1과 ~1.9 에서 scale 값이 변하는 느낌입니다 어떤게 잘못된걸까요 ?
풀면서 0.9여서 a값은 변동이 없고 y값만 0.9 배 해주면 되는 부분이 아니였나요 ??
- 답변은 로그인 후 가능합니다.