Emergence.js 플러그인 사용에 대한 자세한 설명

이번에는 Emergence.js 플러그인 사용에 대한 자세한 설명을 가져오겠습니다. Emergence.js 플러그인 사용 시 주의사항은 무엇인가요?

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

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

emergence.js 기능

1. 다른 구성 요소에 의존할 필요 없음

2. IE8+ 및 모든 최신 브라우저 지원

3. 압축 후 1kb만

설치

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

npm install emergence.js

또한 직접 다운로드하여 html 파일에 Emergence.js를 도입할 수도 있습니다.

rreee

사용방법

보고 싶은 요소에 data-emergence="hidden"을 추가하세요.

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

요소가 뷰포트 내에 표시되면 속성이 data-emergence="visible" 로 변경됩니다. 이제 CSS를 활용하여 요소에 애니메이션을 적용할 수 있습니다.

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

사용자 정의 옵션

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

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

옵션 설명

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

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 === 'visible') {
  console.log('Element is visible.');
 } else if (state === 'reset') {
  console.log('Element is hidden with reset.');
 } else if (state === 'noreset') {
  console.log('Element is hidden with NO reset.');
 }
 }
});

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

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

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

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

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

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

또한 Emergence.js는 두 가지 고급 메서드인 출현.engage()와 출현.disengage()도 제공합니다. 이 메서드는 기능이 완전히 반대입니다.

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

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

네이티브 JS

작업 모달 단일 로드 데이터

에서 Ajax 비동기를 구현하는 방법은 무엇입니까?

위 내용은 Emergence.js 플러그인 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!