최초 커밋

2026-07-23 16:15:57 +09:00
commit c8f5efb6b7
14652 changed files with 4812531 additions and 0 deletions
@@ -0,0 +1,128 @@
+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_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_text1", {opacity: 1});
+    gsap.set(".js__height_text2", {opacity: 0});
+
+    const bottomToCenter = gsap.timeline();
+
+    // ScrollTrigger 설정
+    ScrollTrigger.create({
+        animation: bottomToCenter,
+        trigger: ".js__height_trigger",
+        start: "top top",
+        end: "+=800",
+        pin: true,
+        duration: 0.5,
+        // markers: true,
+        // scrub: true,
+        // anticipatePin: 1,
+        onUpdate: (self) => {
+            const item = document.querySelector(".js__height_item");
+            const text1 = document.querySelector(".js__height_text1");
+            const text2 = document.querySelector(".js__height_text2");
+            if (self.progress > 0.4) {
+                item.style.transition = '0.5s'
+                item.style.height = '100vh';
+                text1.style.opacity = '0';
+                text2.style.transition = '0.5s'
+                text2.style.opacity = '1';
+            } else {
+                item.style.height = '20vh';
+                item.style.transition = '0.5s'
+                text1.style.opacity = '1';
+                text2.style.transition = '0.5s'
+                text2.style.opacity = '0';
+            }
+        }
+    });
+
+});