기본 JavaScript로 스크롤 트리거 애니메이션을 만드는 방법

웹 애니메이션을 영리하게 사용하면 사용자 경험을 향상시키고 웹 사이트 매력을 향상시킬 수 있습니다. 그러나 애니메이션 요소가 페이지 아래에 있으면 사용자가 놓칠 수 있습니다. 이 기사는 네이티브 JavaScript를 사용하여 스크롤 트리거 애니메이션을 구현하는 방법을 소개하여 사용자가 특정 요소로 스크롤하여 리소스 낭비를 피하고 사용자 경험을 향상시킬 때만 애니메이션이 재생되기 시작합니다.

우리는 타사 라이브러리에 의존 할 필요가 없으며 소량의 기본 JavaScript 코드로 만 달성 할 수 있습니다. 핵심은 교차로 관찰자 API를 사용하는 데있어 대상 요소가 창에 들어가는지를 효율적으로 감지 할 수 있습니다.

스크롤 트리거 이벤트를 구현합니다

우리의 접근 방식은 다음과 같습니다.

1. 특정 요소에 대한 스크롤 트리거 이벤트를 처리하려면 scrollTrigger 기능을 작성하십시오.
2. 요소가 창에 들어가면 .active 클래스를 추가하십시오.
3. CSS .active 클래스를 사용하십시오.

또한 요소가 표시 될 때 특정 작업을 수행하기 위해 사용자 정의 콜백 기능을 지원해야합니다.

 Scrolltrigger ( '. loader', {
  CB : 기능 (el) {
    el.innerText = '로드 ...'
    loadContent ()
  }
})

마지막으로, 우리는 오래된 브라우저에서 교차로 관찰자 API의 지원을 처리 할 것입니다.

교차 관찰자 API

교차로 관찰자 API를 통해 대상 요소와 창의 교차 상태를 비동기로 관찰 할 수 있습니다. 이는 스크롤 이벤트를 듣는 것보다 더 효율적입니다.

스크롤 트리거 기능을 작성하십시오

먼저, scrollTrigger 함수를 작성하여 선택기를 매개 변수로 수신합니다.

 함수 scrolltrigger (selector) {
  els = document.querySelectorall (선택기);
  els = array.from (els);
  els.foreach (el => {
    addobserver (el);
  });
}
// 예제 ScrollTrigger ( '. scroll-reveal');

다음으로 addObserver 기능을 작성하고 교차로 관찰자를 사용하여 요소를 듣습니다.

 함수 scrolltrigger (selector) {
  els = document.querySelectorall (선택기);
  els = array.from (els);
  els.foreach (el => {
    addobserver (el);
  });
}
함수 addObserver (el) {
    Let Observer = new intersectionObserver ((entries, observer) => {
      entries.foreach (entry => {
        if (EntrysInterSecting) {
          Entry.target.classlist.add ( 'Active');
          Observer.unobserve (Entry.target);
        }
      });
    });
  Observer.observe (el);
}
// 예제 ScrollTrigger ( '. scroll-reveal');

위의 코드는 요소 부분이 표시되면 .active 클래스를 추가합니다. 보다 미세한 제어를 위해 교차로 관찰자의 options 매개 변수를 사용할 수 있습니다.

 함수 scrolltrigger (selector, 옵션 = {}) {
  els = document.querySelectorall (선택기);
  els = array.from (els);
  els.foreach (el => {
    addobserver (el, 옵션);
  });
}
함수 addObserver (el, 옵션) {
  Let Observer = new intersectionObserver ((entries, observer) => {
    entries.foreach (entry => {
      if (EntrysInterSecting) {
        Entry.target.classlist.add ( 'Active');
        Observer.unobserve (Entry.target);
      }
    });
  }, 옵션);
  Observer.observe (el);
}
// 예제 ScrollTrigger ( '. scroll-reveal', {
  rootmargin : '-200px'
});

이제 우리는 처음 두 목표를 달성했습니다. 다음으로 콜백 기능 지원 추가 :

 함수 scrolltrigger (selector, 옵션 = {}) {
  els = document.querySelectorall (선택기);
  els = array.from (els);
  els.foreach (el => {
    addobserver (el, 옵션);
  });
}
함수 addObserver (el, 옵션) {
  Let Observer = new intersectionObserver ((entries, observer) => {
    entries.foreach (entry => {
      if (EntrysInterSecting) {
        if (Options.cb) {
          옵션 .cb (el);
        } 또 다른{
          Entry.target.classlist.add ( 'Active');
        }
        Observer.unobserve (Entry.target);
      }
    });
  }, 옵션);
  Observer.observe (el);
}
// 예제 ScrollTrigger ( '. loader', {
  rootmargin : '-200px',
  CB : 기능 (el) {
    el.innerText = '로드 ...';
    settimeout (() => {
      el.innerText = '작업이 완료되었습니다! ';;
    }, 1000);
  }
});

마지막으로 레거시 브라우저 호환성을 다루십시오.

 함수 scrolltrigger (selector, 옵션 = {}) {
  els = document.querySelectorall (선택기);
  els = array.from (els);
  els.foreach (el => {
    addobserver (el, 옵션);
  });
}
함수 addObserver (el, 옵션) {
  if (! ( 'intersectionObserver')) {
    if (Options.cb) {
      옵션 .cb (el);
    } 또 다른{
      el.classlist.add ( 'Active');
    }
    반품;
  }
  Let Observer = new intersectionObserver ((entries, observer) => {
    entries.foreach (entry => {
      if (EntrysInterSecting) {
        if (Options.cb) {
          옵션 .cb (el);
        } 또 다른{
          Entry.target.classlist.add ( 'Active');
        }
        Observer.unobserve (Entry.target);
      }
    });
  }, 옵션);
  Observer.observe (el);
}
// 예제 scrolltrigger ( '. Intro-text')를 사용합니다.
Scrolltrigger ( '. Scroll-Reveal', {
  rootmargin : '-200px',
});
Scrolltrigger ( '. loader', {
  rootmargin : '-200px',
  CB : 기능 (el) {
    el.innerText = '로드 ...';
    settimeout (() => {
      el.innerText = '작업이 완료되었습니다! ';;
    }, 1000);
  }
});

위의 단계를 통해 스크롤 트리거 애니메이션 효과를 성공적으로 달성하고 브라우저 호환성을 고려했습니다. 이 기사가 귀하의 웹 사이트의 사용자 경험을 향상시키는 데 도움이되기를 바랍니다.

위 내용은 기본 JavaScript로 스크롤 트리거 애니메이션을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!