티스토리 뷰
Coding/javascript
[Javascript] 스크롤 위치에 따라 변하는 애니메이션 : Apple Music UI 따라하기
Kim Da Beeen 2023. 1. 17. 13:09반응형
⭐a,b 값 구하기 위한 1차 함수
⭐스크롤이벤트
⭐opacity(불투명도)
⭐position : stiky *top 속성 필수
⭐transform
html, javascript
<!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">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<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>
<script>
// 스크롤 높이에 따라 변하는 opacity
$(window).scroll(function(){
var 높이 = $(window).scrollTop();
console.log(높이);
/* 1차 함수는
y=a*높이+b */
var y = (-1/500) * 높이 + (115/50);
$('.card-box').eq(0).css('opacity', y); //미지의 변수 y : 높이가 650~1150일때 0~1이 되는 y
var x = (-1/5000) * 높이 + 565/500;
$('.card-box').eq(0).css('transform',`scale(${x})`);
})
</script>
</body>
</html>
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:400px; /*top 400px 부터 고정됨*/
margin-top:200px;
}반응형
'Coding > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트로 타이핑 게임 만들기 (0) | 2023.03.14 |
|---|---|
| [JavaScript] Switch 문법 (0) | 2023.01.18 |
| 캐러셀에 스와이프 기능 만들기 (0) | 2023.01.17 |
| [JavaScript] 장바구니 기능과 localStorage (0) | 2023.01.15 |
| [JavaScript] array에 자주 쓰는 sort, map, filter 함수 (0) | 2023.01.13 |
댓글