Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank. Less than 1kb minified + gzipped.
Old school (exposes the enterView global):
<script src="https://unpkg.com/enter-view"></script>New school:
npm install enter-view --saveAnd then import/require it:
import enterView from 'enter-view'; // or...
const enterView = require('enterView');enterView({
selector: '.class-name',
enter: function(el) {
el.classList.add('entered');
}
});
enterView({
selector: '.class-name',
enter: function(el) {
el.classList.add('entered');
},
exit: function(el) {
el.classList.remove('entered');
},
progress: function(el, progress) {
el.style.opacity = progress;
},
offset: 0.5, // enter at middle of viewport
once: true, // trigger just once
});
Takes a class, id, or array of dom elements.
Callback function that returns the element that was entered.
Callback function that returns the element that was exited.
Callback function that returns the element that was progressed through, and a value between 0 and 1 of how far through the element progress has been made.
A value from 0 to 1 of how far from the bottom of the viewport to offset the trigger by. 0 = top of element crosses bottom of viewport (enters screen from bottom), 1 = top of element crosses top of viewport (exits screen top).
Whether or not to trigger the callback just once.