https://github.com/firstandthird/scroll-triggers
Javascript library to trigger various things as a user scrolls down the page
https://github.com/firstandthird/scroll-triggers
Last synced: 3 months ago
JSON representation
Javascript library to trigger various things as a user scrolls down the page
- Host: GitHub
- URL: https://github.com/firstandthird/scroll-triggers
- Owner: firstandthird
- License: mit
- Created: 2016-09-20T02:52:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T14:33:53.000Z (over 3 years ago)
- Last Synced: 2025-03-04T09:40:27.526Z (about 1 year ago)
- Language: HTML
- Homepage:
- Size: 986 KB
- Stars: 14
- Watchers: 7
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# scroll-triggers 
A tiny, dependency-less javascript library to add classes as elements scroll into viewport.
## Features
* Add a class when an element comes into view (great for animations)
* Set an image when an element comes into view (great for lazy loading)
* Set the width of an element based on scroll % (great for scroll progress bars)
* API for both HTML and Javascript
## Install
```sh
npm install scroll-triggers
```
## Setup
```javascript
import 'scroll-triggers';
// alternative
import scrollTriggers from 'scroll-triggers';
```
## Events
Custom events are fired/listened on the element:
| Event | Type | Description |
|----------------------------|----------|-------------------------|
| `scrolltriggers:inView` | Fired | Element is in view |
| `scrolltriggers:outOfView` | Fired | Element is out of view |
| `scrolltriggers:pause` | Listened | Pauses scroll-triggers |
| `scrolltriggers:resume` | Listened | Resumes scroll-triggers |
## Options
List of available options:
| Name | Type | Description |
|---------------|---------------------------------------------------|--------------------------------------------------------------------------|
| `className` | _{string}_ | Class to be added/removed when element is in view |
| `start` | _{string\|Element\|NodeList}_ CSS Selector | Add class when the specified element is in view |
| `end` | _{string\|Element\|NodeList}_ CSS Selector | Removes class when the specified element is in view |
| `position` | _{string = 'bottom'}_ "top\|middle\|bottom" | Add class at when element hits the specified position of page |
| `positionEnd` | _{string = 'bottom'}_ "auto\|top\|middle\|bottom" | Removes class when specified element hits the specified position of page |
| `offset` | _{number}_ | The offset controls the distance (negative or positive) between the top border of the element and the top border of the window. This is useful to fine tune when a class is added. |
| `image` | _{string}_ Path to image | Set an image when an element comes into view, if the element is an ![]()
it will set it as the src, otherwise it will be set as `background-image` |
| `src` | _{string}_ Path to resource | Set the `src` property when an element comes into view |
| `srcset` | _{string}_ Path to resource | Set the `srcset` property when an element comes into view |
| `progress` | _{boolean = false}_ | Set the width of an element based on scroll % |
| `once` | _{boolean = true}_ | Whether scroll-triggers should be executed once or not |
| `fixed` | _{boolean = true}_ | Needed for fixed (`position: fixed`) elements |
| `inView` | _{function}_ | Callback executed when element is in view |
| `outOfView` | _{function}_ | Callback executed when element is out view |
## Usage
See [the example](example/index.html).
### HTML
Add class when element is in view.
```html
```
Add class when another element is in view
```html
```
Add class when another element is in view and remove when it gets to another element
```html
```
Add class at when element hits bottom of page
```html
```
Add class at when element hits middle of page
```html
```
Set an image when an element comes into view as a background image
```html
```
Set the width of an element based on scroll % (great for progress bars)
```html
```
Set the `src` property when an element comes into view (great for lazy load)
```html
```
Set the `srcset` property when an element comes into view (great for lazy load)
```html
```
### JavaScript
```javascript
import scrollTriggers from 'scroll-triggers';
scrollTriggers([
{
el: '.some-selector',
start: '.selector',
end: '.selector',
className: 'class-to-add',
image: 'image/path.jpg',
src: 'http://url-to-resource.com',
srcSet: 'http://url-to-resource.com',
position: 'top|middle|bottom',
positionEnd: 'auto|top|middle|bottom',
offset: -20,
progress: true|false,
once: true|false,
fixed: true|false,
inView: (el, options) => {},
outOfView: (el, options) => {}
}
]);
```