https://github.com/wide/viewport
Handle intersection between elements and the viewport.
https://github.com/wide/viewport
modulus
Last synced: 13 days ago
JSON representation
Handle intersection between elements and the viewport.
- Host: GitHub
- URL: https://github.com/wide/viewport
- Owner: wide
- License: mit
- Created: 2020-05-29T15:01:14.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-21T16:09:06.000Z (about 2 years ago)
- Last Synced: 2025-11-04T06:24:59.239Z (3 months ago)
- Topics: modulus
- Language: JavaScript
- Size: 14.6 KB
- Stars: 1
- Watchers: 7
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Viewport
Handle intersection between elements and the viewport.
## Install
```
npm install @wide/viewport --save
```
## Usage
Observe `[data-viewport]` elements:
```js
import '@wide/viewport'
```
```html
```
These elements will triggers 2 events when they appear in the viewport and when they leave :
```js
// 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:
```html
```
This element will now received these 4 `css` classes:
- `.fade`
- `.fade-enter`
- `.fade-active`
- `.fade-leave`
Exemple of an appearance transition:
```html
```
```scss
.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:
```html
```
## Methods
Observe programmaticaly an element in the viewport:
```js
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](https://github.com/myeti)
- **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta)
## License
This project is licensed under the MIT License - see the [licence](licence) file for details