148 lines
4.3 KiB
JavaScript
148 lines
4.3 KiB
JavaScript
document.addEventListener("DOMContentLoaded", (event) => {
|
|
|
|
// ---------------------------------------------
|
|
// js__fixLeft 오른쪽에 따라 왼쪽 내용 변하기
|
|
// 사용 클래스 : js__fixLeft_tit, js__fixLeft_bg, js__fixLeft_sec
|
|
// ---------------------------------------------
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const key1 = document.querySelector('.key.find')
|
|
const key1Tits = key1.querySelectorAll(".js__fixLeft_tit > li");
|
|
const key1Sections = key1.querySelectorAll(".js__fixLeft_secs > div");
|
|
const key2 = document.querySelector('.key.info')
|
|
const key2Tits = key2.querySelectorAll(".js__fixLeft_tit > li");
|
|
const key2Sections = key2.querySelectorAll(".js__fixLeft_secs > div");
|
|
const key3 = document.querySelector('.key.print')
|
|
const key3Tits = key3.querySelectorAll(".js__fixLeft_tit > li");
|
|
const key3Sections = key3.querySelectorAll(".js__fixLeft_secs > div");
|
|
|
|
|
|
function titOnEnter(element) {
|
|
gsap.to(element, {
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function titOnLeave(element) {
|
|
gsap.to(element, {
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function key1UpdateTit(index) {
|
|
key1Tits.forEach((tit, i) => {
|
|
if (i === index) {
|
|
tit.classList.add("on");
|
|
titOnEnter(tit);
|
|
} else {
|
|
tit.classList.remove("on");
|
|
titOnLeave(tit);
|
|
}
|
|
});
|
|
}
|
|
|
|
function key2UpdateTit(index) {
|
|
key2Tits.forEach((tit, i) => {
|
|
if (i === index) {
|
|
tit.classList.add("on");
|
|
titOnEnter(tit);
|
|
} else {
|
|
tit.classList.remove("on");
|
|
titOnLeave(tit);
|
|
}
|
|
});
|
|
}
|
|
|
|
function key3UpdateTit(index) {
|
|
key3Tits.forEach((tit, i) => {
|
|
if (i === index) {
|
|
tit.classList.add("on");
|
|
titOnEnter(tit);
|
|
} else {
|
|
tit.classList.remove("on");
|
|
titOnLeave(tit);
|
|
}
|
|
});
|
|
}
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key1Sections[0],
|
|
start: "top 30%",
|
|
// markers: true,
|
|
onEnter: () => key1UpdateTit(0),
|
|
onLeaveBack: () => key1UpdateTit(0)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key1Sections[1],
|
|
start: "center 70%",
|
|
// markers: true,
|
|
onEnter: () => key1UpdateTit(1),
|
|
onLeaveBack: () => key1UpdateTit(1)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key1Sections[2],
|
|
start: "bottom bottom",
|
|
// markers: true,
|
|
onEnter: () => key1UpdateTit(2),
|
|
onLeaveBack: () => key1UpdateTit(2)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key2Sections[0],
|
|
start: "top 30%",
|
|
// markers: true,
|
|
onEnter: () => key2UpdateTit(0),
|
|
onLeaveBack: () => key2UpdateTit(0)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key2Sections[1],
|
|
start: "center 70%",
|
|
// markers: true,
|
|
onEnter: () => key2UpdateTit(1),
|
|
onLeaveBack: () => key2UpdateTit(1)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key2Sections[2],
|
|
start: "bottom bottom",
|
|
// markers: true,
|
|
onEnter: () => key2UpdateTit(2),
|
|
onLeaveBack: () => key2UpdateTit(2)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key2Sections[3],
|
|
start: "bottom bottom",
|
|
// markers: true,
|
|
onEnter: () => key2UpdateTit(3),
|
|
onLeaveBack: () => key2UpdateTit(3)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key3Sections[0],
|
|
start: "top 30%",
|
|
// markers: true,
|
|
onEnter: () => key3UpdateTit(0),
|
|
onLeaveBack: () => key3UpdateTit(0)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key3Sections[1],
|
|
start: "center 70%",
|
|
// markers: true,
|
|
onEnter: () => key3UpdateTit(1),
|
|
onLeaveBack: () => key3UpdateTit(1)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: key3Sections[2],
|
|
start: "bottom bottom",
|
|
// markers: true,
|
|
onEnter: () => key3UpdateTit(2),
|
|
onLeaveBack: () => key3UpdateTit(2)
|
|
});
|
|
|
|
}); |