최초 커밋

2026-07-23 16:15:57 +09:00
commit c8f5efb6b7
14652 changed files with 4812531 additions and 0 deletions
@@ -0,0 +1,131 @@
+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;
+    }
+}
+
+
+
+