Emergence.js 플러그인 사용에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-04-14 15:05:041490검색
이번에는 Emergence.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를 도입할 수도 있습니다.
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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
에서 Ajax 비동기를 구현하는 방법은 무엇입니까?위 내용은 Emergence.js 플러그인 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!