20260205 업데이트(컨텐츠 페이지 연결)

kngil/js/value.js

@@ -0,0 +1,96 @@
+/**
+ * Value Page Animation Controller
+ * Intersection Observer를 사용한 스크롤 애니메이션
+ */
+(function() {
+  'use strict';
+
+  // ============================================
+  // Configuration
+  // ============================================
+  const CONFIG = {
+    SELECTORS: {
+      animationTarget: '.js-ani'
+    },
+    OBSERVER: {
+      root: null,
+      rootMargin: '0px',
+      threshold: [0, 0.7]
+    },
+    ANIMATION: {
+      cardClass: 'card-ani',
+      lineClass: 'move-ani',
+      duration: 1200
+    }
+  };
+
+  // ============================================
+  // Animation Controller
+  // ============================================
+  const AnimationController = {
+    hasRun: false,
+    targetElement: null,
+    observer: null,
+
+    init() {
+      this.targetElement = document.querySelector(CONFIG.SELECTORS.animationTarget);
+      
+      if (!this.targetElement) {
+        return;
+      }
+
+      this.setupObserver();
+    },
+
+    setupObserver() {
+      this.observer = new IntersectionObserver(
+        this.handleIntersection.bind(this),
+        CONFIG.OBSERVER
+      );
+      
+      this.observer.observe(this.targetElement);
+    },
+
+    handleIntersection(entries) {
+      entries.forEach(entry => {
+        if (!this.hasRun && entry.intersectionRatio >= 0.7) {
+          this.startAnimation();
+          this.hasRun = true;
+          this.observer.unobserve(this.targetElement);
+        }
+      });
+    },
+
+    startAnimation() {
+      // 카드 애니메이션 클래스 추가
+      this.targetElement.classList.add(CONFIG.ANIMATION.cardClass);
+      
+      // 라인 애니메이션 클래스 추가
+      const linesElement = this.targetElement.querySelector('.lines');
+      if (linesElement) {
+        linesElement.classList.add(CONFIG.ANIMATION.lineClass);
+      }
+
+      // 애니메이션 종료 후 클래스 제거
+      setTimeout(() => {
+        this.targetElement.classList.remove(CONFIG.ANIMATION.cardClass);
+      }, CONFIG.ANIMATION.duration);
+    }
+  };
+
+  // ============================================
+  // Initialization
+  // ============================================
+  const init = () => {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        AnimationController.init();
+      });
+    } else {
+      AnimationController.init();
+    }
+  };
+
+  init();
+
+})();