32 lines
1.2 KiB
JavaScript
32 lines
1.2 KiB
JavaScript
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);
|
|
|
|
|
|
})
|