최초 커밋

eng/js/interface_251226.js

@@ -0,0 +1,159 @@
+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)
+    });
+
+    ScrollTrigger.create({
+        trigger: sections[2],
+        start: "center bottom",
+       // markers: true,
+        onEnter: () => updateElements(2),
+        onLeaveBack: () => updateElements(2)
+    });
+
+});
+
+// 고정 슬라이드
+document.addEventListener('DOMContentLoaded', function() {
+    const route = document.querySelector('.route');
+    const sections = route.querySelectorAll('#sec1, #sec2, #sec3');
+    const tabs = route.querySelectorAll('.tabs li');
+    const subs = route.querySelectorAll('.subs li');
+    const imgs = route.querySelectorAll('.imgs li');
+
+    const observerOptions = {
+        root: null,
+        rootMargin: '20px',
+        threshold: 0.5
+    };
+
+    const observerCallback = (entries) => {
+        entries.filter(entry => entry.isIntersecting).forEach(entry => {
+            const id = entry.target.id;
+            [tabs, subs, imgs].forEach(group => 
+                group.forEach((el, index) => 
+                    el.classList.toggle('on', id === `sec${index + 1}`)
+                )
+            );
+        });
+    };
+
+    const observer = new IntersectionObserver(observerCallback, observerOptions);
+    sections.forEach(section => observer.observe(section));
+});
+
+
+// 듀얼모니터 시퀀스 애니메이션
+$(function(){
+
+// define images
+var images = Array();
+
+for (let i = 1; i < 105; i++) {
+    images.push(`../img/com_img/comp_${i}.png`);
+}
+
+	// TweenMax can tween any property of any object. We use this object to cycle through the array
+	var obj = {curImg: 0};
+
+	// create tween
+	var tween = TweenMax.to(obj, 1,
+		{
+			curImg: images.length - 1,	// animate propery curImg to number of images
+			roundProps: "curImg",				// only integers so it can be used as an array index
+					// repeat 3 times
+			immediateRender: true,			// load first image automatically
+			ease: Linear.easeNone,			// show every image the same ammount of time
+			onUpdate: function () {
+			  $("#myimg").attr("src", images[obj.curImg]); // set the image source
+			}
+		}
+	);
+
+	// init controller
+	var controller = new ScrollMagic.Controller();
+
+	// build scene
+	var scene = new ScrollMagic.Scene({triggerElement: "#dualm", duration: 2500, triggerHook: 0})
+					.setTween(tween)
+					.setPin('#dualm')
+					//.addIndicators() // add indicators (requires plugin)
+					.addTo(controller);
+
+});
+