자바스크립트 기반 모션 인터렉티브 찾아보고 공부하려다
아는분이 지삽을 추천해서 사용하게되었는데.
이게 엄청 편하고 다양하고 모션쓰기가 좋아서 글을쓴다.
대표기능중하나인 스크롤트리거
https://greensock.com/docs/v3/Plugins/ScrollTrigger
정보링크. 영상포함.
https://lpla.tistory.com/106 - 옵션 한글설명
시작하기.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>cdn 코드이다. html 하단에 붙이고
그아래 js 파일을 링크해서 사용한다.
이걸 헤드 쪽에 붙이고 시작하면. 오류가 난다.
기본적인 기능설명.
html
<!DOCTYPE html>
<html lang="kr">
<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">
<link rel="stylesheet" href="./test.css">
<title>Document</title>
</head>
<body >
<section style="height:5000px">
<div class="box a">a</div>
<div class="box b" >b</div>
<div class="box c">c</div>
</section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="./jqr.js"></script>
<script src="./test.js"></script>
</html>css
html {
scroll-behavior: smooth;
}
.box{
position:relative;
width:20%;
height:100px;
top:1000px;
margin-top: 300px ;
}
.a{
background-color: red;
}
.b{
background-color: green;
}
.c{
background-color: blue;
}js
gsap.registerPlugin(ScrollTrigger); //스크롤 트리거를 불러온다 cdn 필요
gsap.to(
".b",{
scrollTrigger: {
trigger:".a",
start:"top center", // 없으면 화면 아래 바로 보이는순간 발동
// top 객체의 탑 // px로는 객체가 걸리는부분을 크기조절가능
// center 화면의 중앙에 왔을때 트리거 작동 // %로 바꾸면 위에서 아래까지 80% 스크롤감지위치
endTrigger: ".b", // 트리거 종료 객체
end:"bottom 100px",
//()=>"+="+ document.querySelector(".c").offsetWidth,// 객체의 넒이만큼의 객체가 걸리는공간
//bottom 100px 스크롤감지 끝나는부분을 조절가능
// +=300 객체의 감지부분이 커진다 아래로? 스크롤감지는 스타트랑 엔드가 그냥 같아짐 (지나가면서 모든걸 감지)
markers: true,//화면 작동 마커 보여줌
toggleActions: "play none none none"
//기본 none
// play = 한번 실행되고 끝
// restart = 스크르롤을 올리고 다시내리면 다시시작
// pause = 안보고 그냥 내려서 지나가면 멈춘다
// resume = 위에 퍼즈된걸 보면 멈춘걸 움직인다.
// reverse = 위로 올라가면 퍼즈된걸 시작지점으로 다시돌아간다.
// pause = 마지막 퍼즈는 위로올라가면 원상태지점으로 돌아가는 애니메이션 실행
}, // 스크롤트리거 추가 c가 보이는순간 실행
x:100,
rotation:360,
duration:3
});
let tl = gsap.timeline({ // 타임라인으로 함수로만들어서 사용가능
scrollTrigger:{
trigger:".c",
start:"top center",
end:"top 100px",
scrub:1 ,
// 스크롤위치에따라서 인트렉션 움직임 스크롤움직여야 움직여짐
// 숫자를 넣을시 1초동안 미끄러지면서 딜레이되면서 움직여짐
pin:true, //스크롤감지의 시작된 위치로 위아래로 이동한다. 다른박스의 클래스를넣어두면 그 클래스의 박스 높이값으로? 이동
markers:true
}
});
let widths = document.body.offsetWidth;
let widthss= widths/2
console.log(widthss)
tl.to(
".c",{
x:widthss,
rotation: 360,
ease:"none",
duration: 3
}
).to(".c",{ //to로 연결가능
backgroundColor:"purple",
duration:1,
opacity: 0
})
.to(".c",{
x:0,
duration:3,
opacity:1
})스크롤 움직임에따른 페이지 애니메이션 (중요)
html
<!DOCTYPE html>
<html lang="kr">
<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">
<link rel="stylesheet" href="./test2.css">
<title>Document</title>
</head>
<body >
<section>
<div class="box_main">메인컨테이너</div>
</section>
<section id="container">
<div class="box orange">orange</div>
<div class="box purple">purple</div>
<div class="box green">green</div>
</section>
<section style="width:100%;height:1000px;">
아래공간 확보용
</section>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="./text2.js"></script>
</html>css
.box_main{
position: relative;
width:100%;
height:900px;
background-color: #848489;
}
#container{
position: relative;
width:100%;
height:816px;
background-color: blue;
overflow: hidden;
}
.box{
position:absolute;
}
.orange{
width:100%;
height:100%;
background-color: orange;
}
.purple{
width:100%;
height:100%;
background-color: purple;
}
.green{
width:100%;
height:100%;
background-color: green;
}js
gsap.registerPlugin(ScrollTrigger)
gsap.defaults({ease:"none", duration:2})
const tl = gsap.timeline();
tl.from(".orange", {xPercent:-100}) //객체의 위치를 퍼센트로 밖으로 꺼내둔것.
.from(".purple", {yPercent:100})
.from(".green", {xPercent:-100});
ScrollTrigger.create({
animation:tl,
trigger:"#container",
start:"top top",
end:"+=6000",//스크롤의 양? 얼마나 스크롤될건지. 높아지면 애니메이션이 느려짐
scrub:true,
pin:true,
anticipatePin:1
});개인적으로 링크를 따라가면 영상으로 잘되어있으니 영어를 못해도 충분히 이해할수가있다.
노력하는 성장형