728x90
IntersectionObserver()를 통해서 스크롤 애니메이션을 쉽게 구현할 수 있다.
Html & CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {background: #000; height: 6000px; font-family: 'nanumsquare';}
div {margin-top: 1000px; color: #fff; text-align: center; opacity: 0; transform: rotate(-720deg); transition: all 0.5s;}
</style>
</head>
<body>
<div><h1>iphone 15 출시</h1></div>
<div><h1>충전포트 어쩌구</h1></div>
<div><h1>그래서 제거 어쩌구</h1></div>
<div><img src="./image.png"></div>
</body>
</html>
먼저 스크립트에 IntersectionObserver를 불러와서 변수에 저장하기
var observer = new IntersectionObserver(()=>{})
observer.observe()를 사용해서 html 요소가 화면에 등장하는지 감시할 수 있다.
원하는 Html 요소를 불러와서 ()안에 넣어준다.
var div = document.querySelectorAll('div')
observer.observe(div[0])
observer.observe(div[1])
observer.observe(div[2])
observer.observe(div[3])
감시 중인 Html 요소가 화면에 등장하면 {}안에 코드를 실행해준다.
따라서 중괄호 안에 원하는 애니메이션을 주면 된다.
* 파라미터인 e를 출력하면 현재 감시중인 모든 html 요소를 출력함
* 그냥 코드를 작성하면 화면에 안보일 때도 실행이 되므로 if문을 사용해 보일때/사라질때만 실행되도록 해준다.
(요소가 화면에 보일 때는 isIntersecting이 true가 됨)
var observer = new IntersectionObserver((e)=>{
e.forEach((box)=>{
if(box.isIntersecting){
box.target.style.opacity = 1;
box.target.style.transform = 'rotate(0deg)';
} else {
box.target.style.opacity = 0;
box.target.style.transform = 'rotate(-720deg)';
}
})
})
* intersectionRatio를 사용하면 화면에 몇퍼센트 나오는지 알려줌 0.5 이런식으로
728x90
LIST
'Study > Publishing' 카테고리의 다른 글
| [Html] table 태그 정복하기 (1) | 2024.04.18 |
|---|---|
| [JS] 숫자 카운트 애니메이션 (0) | 2024.02.02 |
| [CSS] font 단위 pt와 px의 차이점 (0) | 2024.02.01 |
| [웹디자인기능사] 필기 55 웹 그래픽 제작 기법의 정의 ~ 60 애니메이션의 효과 및 활용 (0) | 2024.01.12 |
| [웹디자인기능사] 필기 51 웹 접근성 이해 ~ 54 파일 포맷의 특징 및 활용 (2) | 2024.01.11 |
