https://github.com/codeabinash/scroll-observer
A JavaScript library to animate easily elements on scroll into view
https://github.com/codeabinash/scroll-observer
javascript-library scroll-observer scrollview
Last synced: about 1 month ago
JSON representation
A JavaScript library to animate easily elements on scroll into view
- Host: GitHub
- URL: https://github.com/codeabinash/scroll-observer
- Owner: codeAbinash
- License: mit
- Created: 2022-09-18T11:59:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-16T17:34:23.000Z (over 3 years ago)
- Last Synced: 2025-01-01T21:46:26.114Z (about 1 year ago)
- Topics: javascript-library, scroll-observer, scrollview
- Language: HTML
- Homepage: https://codeabinash.github.io/scroll-observer/example/
- Size: 160 KB
- Stars: 26
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Scroll Observer
# [Live Example](https://codeabinash.github.io/scroll-observer/example/)
## Introduction
ScrollObserver A lightweight⚡(less than 1KB) JavaScript library to animate easily elements on scroll into view.
## How it works
When a DOM element is onscreen it adds `shown` class to it and when offscreen removes that `shown` class.
## How to use
```js
scrollObserver('.card')
```
The above JavaScript code adds and removes the `shown` class to the elements which have `card` class (select elements like `querySelectorAll()`) when they are onscreen and offscreen respectively.
You can pass multiple selectors as an array of string.
```js
scrollObserver(['.card', '.box'])
```
## CSS
Write css of `.card` and `.card.shown` like this
```css
.card{
...
...
transition: 400ms;
opacity : 0;
}
.card.shown {
opacity: 1;
}
```
## Features
### options argument
```js
const options = {
root : document.querySelector('.container'),
rootMargin : '10px',
threshold: [0, 0.25, 0.5, 0.75, 1],
once: true,
onshow: function (entry) {
console.log("Showing ")
},
onhide: function (entry) {
console.log("Hiding ")
},
}
scrollObserver('.card', options)
```
Read more about Options argument from [MDN Docs ](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer)
## once
If the value of once is true, it will work once.
## onshow and onhide
They are callback functions. They are called when the element becomes onscreen or offscreen
## root, rootMargin, threshold
Read them from [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer)
## Example
- index.html
- style.css
- script.js
### index.html
```html
Scroll Observer
Scroll Observer
Scroll Observer
Scroll Observer
Scroll Observer
Scroll Observer
Scroll Observer
Scroll Observer
Scroll Observer
```
### style.css
```css
*{
font-family: Arial, Helvetica, sans-serif;
}
.card{
width: min(90%, 500px);
aspect-ratio: 2 / 1;
margin-inline: auto;
background-color: hsl(61, 70%, 70%);
display: grid;
place-items: center;
margin-block: 7%;
border-radius: 10px;
transition: 400ms;
opacity: 0;
scale: 0.8;
}
.card.shown {
opacity: 1;
scale: 1;
}
```
### script.js
```js
import scrollObserver from 'https://codeabinash.github.io/scroll-observer/index.min.js'
scrollObserver('.card')
```