145 lines
4.3 KiB
JavaScript
145 lines
4.3 KiB
JavaScript
document.addEventListener("DOMContentLoaded", (event) => {
|
|
// ---------------------------------------------
|
|
// js__snap 스크롤 스냅하기
|
|
// 사용 클래스 : js__snap
|
|
// ---------------------------------------------
|
|
// document.querySelectorAll('.js__snap').forEach(element => {
|
|
// gsap.to(element, {
|
|
// scrollTrigger: {
|
|
// trigger: element,
|
|
// start: 'top 30%',
|
|
// // markers: true,
|
|
// end: 'bottom 80%',
|
|
// onEnter: () => {
|
|
// gsap.to(window, { scrollTo: { y: element, offsetY: 0 }, duration: 0.2});
|
|
// },
|
|
// onEnter: () => {
|
|
// gsap.to(window, { scrollTo: { y: element, offsetY: 0 }, duration: 0.2});
|
|
// },
|
|
// }
|
|
// });
|
|
// });
|
|
|
|
|
|
// ---------------------------------------------
|
|
// js__fixLeft 오른쪽에 따라 왼쪽 내용 변하기
|
|
// 사용 클래스 : js__fixLeft_tit, js__fixLeft_bg, js__fixLeft_sec
|
|
// ---------------------------------------------
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const tits = document.querySelectorAll(".js__fixLeft_tit");
|
|
const bgs = document.querySelectorAll(".js__fixLeft_bg");
|
|
const sections = document.querySelectorAll(".js__fixLeft_sec");
|
|
|
|
|
|
function bgOnEnter(element) {
|
|
gsap.to(element, {
|
|
transform: "scale(1.05)",
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function bgOnLeave(element) {
|
|
gsap.to(element, {
|
|
transform: "scale(1)",
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function titOnEnter(element) {
|
|
gsap.to(element, {
|
|
opacity: 1,
|
|
transform: "scale(1) translate(0%, 0%)",
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function titOnLeave(element) {
|
|
gsap.to(element, {
|
|
opacity: 0.5,
|
|
transform: "scale(0.7) translate(-30%, 0%)",
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function updateElements(index) {
|
|
bgs.forEach((bg, i) => {
|
|
if (i === index) {
|
|
bg.classList.add("on");
|
|
bgOnEnter(bg);
|
|
} else {
|
|
bg.classList.remove("on");
|
|
bgOnLeave(bg);
|
|
}
|
|
});
|
|
|
|
tits.forEach((tit, i) => {
|
|
if (i === index) {
|
|
tit.classList.add("on");
|
|
titOnEnter(tit);
|
|
} else {
|
|
tit.classList.remove("on");
|
|
titOnLeave(tit);
|
|
}
|
|
});
|
|
}
|
|
|
|
ScrollTrigger.create({
|
|
trigger: sections[0],
|
|
start: "center top",
|
|
end: "center top",
|
|
// markers: true,
|
|
onEnter: () => updateElements(0),
|
|
onLeaveBack: () => updateElements(0)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: sections[1],
|
|
start: "top center",
|
|
end: "top center",
|
|
// markers: true,
|
|
onEnter: () => updateElements(1),
|
|
onLeaveBack: () => updateElements(1)
|
|
});
|
|
|
|
|
|
|
|
// ---------------------------------------------
|
|
// js__height 스크롤 하면 높이 높아지기
|
|
// 사용 클래스 : js__height_item, js__text, js__height_trigger
|
|
// ---------------------------------------------
|
|
|
|
gsap.set(".js__height_item", {height: "20vh"});
|
|
gsap.set(".js__height_text", {opacity: 0});
|
|
|
|
const bottomToCenter = gsap.timeline();
|
|
|
|
// ScrollTrigger 설정
|
|
ScrollTrigger.create({
|
|
animation: bottomToCenter,
|
|
trigger: ".js__height_trigger",
|
|
start: "top top",
|
|
end: "+=800",
|
|
scrub: true,
|
|
pin: true,
|
|
// markers: true,
|
|
anticipatePin: 1,
|
|
onUpdate: (self) => {
|
|
const item = document.querySelector(".js__height_item");
|
|
const text = document.querySelector(".js__height_text");
|
|
if (self.progress > 0.4) {
|
|
item.style.transition = '0.5s'
|
|
item.style.height = '100vh';
|
|
text.style.transition = '0.5s'
|
|
text.style.opacity = '1';
|
|
} else {
|
|
item.style.height = '20vh';
|
|
item.style.transition = '0.5s'
|
|
text.style.transition = '0.5s'
|
|
text.style.opacity = '0';
|
|
}
|
|
}
|
|
});
|
|
|
|
});
|