최초 커밋

egbim/js/primary.js

@@ -0,0 +1,143 @@
+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: "top top",
+      // markers: true,
+      onEnter: () => updateElements(0),
+      onLeaveBack: () => updateElements(0)
+  });
+  
+  ScrollTrigger.create({
+      trigger: sections[1],
+      start: "top center",
+      // markers: true,
+      onEnter: () => updateElements(1),
+      onLeaveBack: () => updateElements(1)
+  });
+
+  ScrollTrigger.create({
+      trigger: sections[2],
+      start: "top center",
+     // markers: true,
+      onEnter: () => updateElements(2),
+      onLeaveBack: () => updateElements(2)
+  });
+// ++++++++++++++++++ S: TODO 진슬 추가_ 클릭시에도 메뉴 불 나오게
+$(tits).each(function(index, val){
+  val.addEventListener("click", () => {
+    gsap.to(window, {
+      duration: 0, 
+      scrollTo: {y:"#content" + (index + 1), offsetY:390 }
+    }).play(),
+    gsap.to(val, {
+      onComplete: function(){
+        // $('.js__fixLeft_tit > li > a').removeClass('on'),
+        // $(val).addClass('on')
+        // ~ S: 기존 함수 활용
+        if(index === 0) {
+          updateElements(0)
+        } else if(index === 1) {
+          updateElements(1)
+        } else if(index === 2) {
+          updateElements(2)
+        } 
+        // ~ E: 기존 함수 활용 
+      }
+    }).play();
+  });
+})
+ // ++++++++++++++++++ E: TODO 진슬 추가_ 클릭시에도 메뉴 불 나오게
+});
+// 고정 슬라이드
+document.addEventListener('DOMContentLoaded', function() {
+  const route = document.querySelector('.route');
+  const sections = route.querySelectorAll('#sec1, #sec2, #sec3');
+  const tabs = route.querySelectorAll('.tabs .tabs_li');
+  const subs = route.querySelectorAll('.subs li');
+  const imgs = route.querySelectorAll('.imgs li');
+
+  const observerOptions = {
+      root: null,
+      rootMargin: '0px',
+      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));
+});
+
+