132 lines
3.7 KiB
JavaScript
132 lines
3.7 KiB
JavaScript
document.addEventListener("DOMContentLoaded", (event) => {
|
|
// ---------------------------------------------
|
|
// 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_secs > div");
|
|
|
|
|
|
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(-47%, 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",
|
|
// markers: true,
|
|
onEnter: () => updateElements(0),
|
|
onLeaveBack: () => updateElements(0)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: sections[1],
|
|
start: "center center",
|
|
// markers: true,
|
|
onEnter: () => updateElements(1),
|
|
onLeaveBack: () => updateElements(1)
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth <= 992) {
|
|
checkAndToggleDisplay();
|
|
} else {
|
|
document.querySelector('div.left.vc').style.display = 'none';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (window.innerWidth <= 992) {
|
|
checkAndToggleDisplay();
|
|
} else {
|
|
document.querySelector('div.left.vc').style.display = 'none';
|
|
}
|
|
});
|
|
|
|
window.addEventListener('wheel', function(event) {
|
|
if (window.innerWidth <= 992) {
|
|
checkAndToggleDisplay(event);
|
|
} else {
|
|
document.querySelector('div.left.vc').style.display = 'none';
|
|
}
|
|
});
|
|
|
|
function checkAndToggleDisplay(event) {
|
|
const secondChild = document.querySelector('.process .left span.js__fixLeft_tit:nth-of-type(2)');
|
|
console.log(secondChild);
|
|
|
|
const leftVcDiv = document.querySelector('div.left.vc');
|
|
if (!leftVcDiv) return;
|
|
|
|
if (secondChild && secondChild.classList.contains('on')) {
|
|
// 마우스 휠 내리면 opacity를 0으로, 올리면 1로 설정
|
|
if (event.deltaY > 0) {
|
|
leftVcDiv.style.opacity = 0; // 휠 내리면 opacity = 0
|
|
} else if (event.deltaY < 0) {
|
|
leftVcDiv.style.opacity = 1; // 휠 올리면 opacity = 1
|
|
}
|
|
} else {
|
|
// .on 클래스가 없다면 항상 opacity 1로 설정
|
|
leftVcDiv.style.opacity = 1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|