안녕하세요. js 레벨 3의 Position : sticky 활용하기와 스크롤 위치에 따라 변하는 애니메이션 : Apple Music UI 만들기를 참고하여 각각을 홈페이지에서 한 화면에 상단과 하단으로 나누어 함께 배치 시키려 합니다. css 부분에서 몇가지 수정 해봐도 sticky부분은 정상 작동 하는데 애니메이션 부분이 전혀 보이지 않습니다. 방법에 대한 고견 부탁드립니다. 감사합니다.
<body>
<div class="grey">
<h4 class="left-text">안녕하세요 그림같은집 입니다.</h4>
<img class="sticky" src="image/dn.jpg">
</div>
<div class="card-background">
<div class="card-box"
<img src="image/ul3.jpg">
</div>
<div class="card-box"
<img src="image/ul.jpg">
</div>
<div class="card-box"
<img src="image/ul2.jpg">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
$(window).scroll(function(){
var 높이 = $(window).scrollTop();
console.log(높이);
var y = -1/500 * 높이 + 115/50;
$('.card-box').eq(0).css('opacity', y);
});
</script>
<script>
$(window).scroll(function(){
var 높이 = $(window).scrollTop();
console.log(높이);
var y = -1/500 * 높이 + 115/50;
$('.card-box').eq(0).css('opacity', y);
var z = (-1/5000) * 높이 + 565/500;
$('.card-box').eq(0).css('transform', 'scale( ${z} )');
});
</script>
</body>
mail.css 파일
.grey {
background: black;
height: 3000px;
margin-top: 800px;
margin-bottom: 1600px;
}
.left-text {
float: left;
color: white;
padding: 20px;
}
.sticky {
position: sticky;
top: 100px;
float: right
}
.card-background{
height : 6000px;
margin-top: 3800px;
margin-bottom: 1600px;
}
.card-box{
position : sticky;
top: 400px;
margin-top: 200;
}
.card-box img {
display: :block;
margin: auto;
max-width: 80%
}
