Viewport
Handle intersection between elements and the viewport.
Install
npm install @wide/viewport --save
Usage
Observe [data-viewport]
elements:
import '@wide/viewport'
<div data-viewport></div>
These elements will triggers 2 events when they appear in the viewport and when they leave :
// use `e.detail` to get information about the scroll direction or the
// appearance edge of the element (e.g: { edge: 'top', scroll: 'up' })
div.addEventListener('viewport.enter', e => {})
div.addEventListener('viewport.leave', e => {})
Aside from these events, they will received 4 css
classes:
-
.viewport
on page loading, this is the default state -
.viewport-enter
when the element is entering the viewport -
.viewport-active
once the entering animation or transition is finished -
.viewport-leave
when the element has left the viewport
Custom CSS classes
You can replace the state class name with your own:
<div data-viewport="fade"></div>
This element will now received these 4 css
classes:
.fade
.fade-enter
.fade-active
.fade-leave
Exemple of an appearance transition:
<div class="foo" data-viewport.once="fade"></div>
.fade {
opacity: 0;
transform: translateY(80px);
transition: all 300ms;
&-enter,
&-active {
opacity: 1;
transform: translateY(0);
}
}
Observe once only
You can set an option to unlisten after entering the viewport once:
<div data-viewport.once></div>
Methods
Observe programmaticaly an element in the viewport:
import viewport from '@wide/viewport'
const el = document.querySelector('.something')
viewport(el, {
enter(el) {},
leave(el) {},
once: false,
name: 'fade'
})
Authors
- Aymeric Assier - github.com/myeti
- Julien Martins Da Costa - github.com/jdacosta
License
This project is licensed under the MIT License - see the licence file for details