집 > 기사 > 웹 프론트엔드 > 요소 가시성을 감지하는 Emergence.js js 플러그인

요소 가시성을 감지하는 Emergence.js js 플러그인

小云云원래의: 2018-01-18 11:26:241420검색

이 글에서는 Emergence.js를 사용하여 요소의 가시성을 감지하는 js 플러그인을 주로 소개하며, Emergence.js의 설치 및 사용법도 자세히 소개합니다. 관심 있는 분들은 참여해 보세요. . 모든 사람에게 도움이 되기를 바랍니다.

Emergence.js는 브라우저에서 요소를 감지하고 조작하기 위한 경량의 고성능 JS 플러그인입니다.

이 플러그인은 브라우저에서의 가시성에 따라 요소를 조작할 수 있도록 설계되었습니다. 이를 통해 개발자는 자신의 CSS 또는 JS를 자유롭게 사용하여 애니메이션이나 상태 변경을 볼 수 있습니다. 클래스 대신 HTML5 데이터 속성을 활용하여 개발을 단순화합니다. Emergence.js는 동종 플러그인 중 가장 가볍고 호환성이 가장 뛰어난 플러그인 중 하나입니다.

emergence.js 기능

다른 구성 요소에 의존할 필요 없음
IE8+ 및 모든 최신 브라우저 지원
압축 후 1kb만

설치

Emergence.js 설치는 매우 간단합니다. npm의 설치 방법은 다음과 같습니다.

npm install emergence.js

그 외에도 직접 다운로드하여 html 파일에 Emergence.js를 소개하는 방법도 있습니다.

<script src="path/to/emergence.min.js"></script>
<script>
 emergence.init();
</script>

사용 방법

보려는 요소에 data-emergence="hidden" 추가:

< p class = “ element ” data-emergence = “ hidden ” > </ p >

요소가 뷰포트 내부에 표시되면 속성은 데이터가 됩니다. 출현="표시" . 이제 CSS를 활용하여 요소에 애니메이션을 적용할 수 있습니다.

.element [ data-emergence = hidden ] {
 / *隐藏状态* /
}
.element [ data-emergence = visible ] {
 / *可见状态* / 
}

사용자 정의 옵션

Emergence.js에는 사용자 정의할 수 있는 다양한 옵션이 있습니다. 기본값은 다음과 같습니다.

emergence.init({
 container: window,
 reset: true,
 handheld: true,
 throttle: 250,
 elemCushion: 0.15,
 offsetTop: 0,
 offsetRight: 0,
 offsetBottom: 0,
 offsetLeft: 0,
 callback: function(element, state) {
 if (state === &#39;visible&#39;) {
  console.log(&#39;Element is visible.&#39;);
 } else if (state === &#39;reset&#39;) {
  console.log(&#39;Element is hidden with reset.&#39;);
 } else if (state === &#39;noreset&#39;) {
  console.log(&#39;Element is hidden with NO reset.&#39;);
 }
 }
});

옵션 설명

컨테이너: 기본적으로 요소의 가시성은 창의 뷰포트 크기와 X/Y 스크롤 위치(창으로 설정)에 따라 결정됩니다. 그러나 커스텀 컨테이너로 변경될 수 있습니다. 예:

var customContainer = document.querySelector(&#39;.wrapper&#39;);
// www.xttblog.com
emergence.init({
 container: customContainer
});

Throttle: 이벤트 스크롤 및 크기 조정과 관련된 성능 문제를 방지하는 방법입니다. Throttle은 작은 시간 초과를 생성하고 이벤트 중 특정 밀리초마다 요소의 가시성을 꾸준히 확인합니다. 기본값은 250입니다.

reset: 표시 후 데이터 속성 상태를 재설정할지 여부를 결정합니다. 뷰포트를 떠난 후에도 요소가 표시된 상태를 유지하도록 하려면 false로 재설정하세요. 기본값은 true입니다.

휴대용: Emergence는 휴대폰, 태블릿 등 대부분의 휴대용 장치 모델을 확인합니다. false로 설정하면 해당 장치에서 플러그인이 실행되지 않습니다. 기본값은 true입니다.

elemCushion: 요소 좌표는 뷰포트 내에서 "표시"되어야 하는 요소 수를 결정합니다. 0.5 값은 표시되어야 하는 요소의 50%와 같습니다. 기본값은 0.15입니다.

offsetTop, offsetRight, offsetBottom, offsetLeft: 뷰포트의 모든 측면에 오프셋(픽셀 단위)을 제공합니다. 이는 머리글 높이와 동일한 값으로 오프셋할 수 있는 고정 구성 요소(예: 머리글)가 있는 경우 유용합니다. offsetTop에 100 값을 적용하면 요소가 뷰포트 상단에서 100픽셀보다 큰 경우에만 표시되는 것으로 간주됩니다. 모든 기본값은 0입니다.

콜백: 요소가 표시되고, 숨겨지고, 재설정되는 시기를 결정하는 콜백을 제공하는 데 사용됩니다. 가능한 상태는 visible, 재설정 및 noreset입니다.

또한 Emergence.js는 두 가지 고급 메서드인 recognition.engage();와 출현.disengage();도 제공합니다. 두 가지의 기능은 정반대입니다.

Emergence.js는 다음 브라우저 API를 사용합니다: querySelectorAll

IE8을 지원하려면 표준 모드를 확인하세요.

요소 가시성을 감지하는 Emergence.js js 플러그인

관련 기사