최초 커밋

eng/js/value.js

@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', (event)=> {
+
+    // ---------------------------------------------
+    // 주요기능의 라인 애니, 카드 애니
+    // 사용 클래스 : js__ani
+    // ---------------------------------------------
+    let hasAnimationRun = false;
+    const featuresAni = document.querySelector('.js__ani');
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: [0, 0.7] // Observe both 0% and 70% visibility
+    };
+    const observerCallback = (entries, observer) => {
+        entries.forEach(entry => {
+            if (!hasAnimationRun && entry.intersectionRatio >= 0.7) {
+                featuresAni.classList.add('card_ani');
+                featuresAni.querySelector('.lines').classList.add('move_ani');
+                setTimeout(() => {
+                    featuresAni.classList.remove('card_ani');
+                }, 1200);
+                hasAnimationRun = true; 
+                observer.unobserve(featuresAni);
+            }
+        });
+    };
+    const observer = new IntersectionObserver(observerCallback, observerOptions);
+    observer.observe(featuresAni);
+
+   
+})