Skip to content

Commit 1afe384

Browse files
codeAbinashcodeAbinash
committed
initial
1 parent a5e2072 commit 1afe384

6 files changed

Lines changed: 298 additions & 1 deletion

File tree

test/.gitignore renamed to .gitignore

File renamed without changes.

‎README.md‎

Lines changed: 158 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,158 @@
1-
"# scroll-observer"
1+
# Scroll Observer
2+
![Image](https://img.shields.io/github/size/codeabinash/scroll-observer/index.js)
3+
![Image](https://img.shields.io/github/license/codeabinash/scroll-observer)
4+
5+
## Introduction
6+
ScrollObserver A JavaScript library to animate easily elements on scroll into view.
7+
## How it works
8+
When a DOM element is onscreen it adds `shown` class to it and when offscreen removes that `shown` class.
9+
## How to use
10+
```js
11+
scrollObserver('.card')
12+
```
13+
14+
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.
15+
16+
17+
## CSS
18+
Write css of `.card` and `.card.shown` like this
19+
```css
20+
.card{
21+
...
22+
...
23+
transition: 400ms;
24+
opacity : 0;
25+
}
26+
.card.shown {
27+
opacity: 1;
28+
}
29+
```
30+
31+
## Features
32+
### options argument
33+
```js
34+
const options = {
35+
root : document.querySelector('.container'),
36+
rootMargin : '10px',
37+
threshold: [0, 0.25, 0.5, 0.75, 1],
38+
39+
once: true,
40+
onshow: function (entry) {
41+
console.log("Showing ")
42+
},
43+
44+
onhide: function (entry) {
45+
console.log("Hiding ")
46+
},
47+
}
48+
49+
scrollObserver('.card', options)
50+
```
51+
Read more about Options argument from [MDN Docs ](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer)
52+
53+
## once
54+
If the value of once is true, it will work once.
55+
56+
## onshow and onhide
57+
They are callback functions. They are called when the element becomes onscreen or offscreen
58+
59+
## root, rootMargin, threshold
60+
Read them from [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer)
61+
62+
63+
64+
65+
66+
67+
68+
## Example
69+
- index.html
70+
- style.css
71+
- script.js
72+
73+
74+
### index.html
75+
```html
76+
<!DOCTYPE html>
77+
<html lang="en">
78+
<head>
79+
<meta charset="UTF-8">
80+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
81+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
82+
<title>Scroll Observer</title>
83+
<script src="./script.js" type="module" defer></script>
84+
<link rel="stylesheet" href="style.css">
85+
</head>
86+
87+
<body>
88+
<div class="card">
89+
<h1>Scroll Observer</h1>
90+
</div>
91+
<div class="card">
92+
<h1>Scroll Observer</h1>
93+
</div>
94+
<div class="card">
95+
<h1>Scroll Observer</h1>
96+
</div>
97+
<div class="card">
98+
<h1>Scroll Observer</h1>
99+
</div>
100+
<div class="card">
101+
<h1>Scroll Observer</h1>
102+
</div>
103+
<div class="card">
104+
<h1>Scroll Observer</h1>
105+
</div>
106+
<div class="card">
107+
<h1>Scroll Observer</h1>
108+
</div>
109+
<div class="card">
110+
<h1>Scroll Observer</h1>
111+
</div>
112+
</body>
113+
</html>
114+
```
115+
116+
117+
### style.css
118+
```css
119+
*{
120+
font-family: Arial, Helvetica, sans-serif;
121+
}
122+
body{
123+
overflow-x: hidden;
124+
}
125+
126+
.card{
127+
width: min(90%, 500px);
128+
aspect-ratio: 2 / 1;
129+
margin-inline: auto;
130+
background-color: hsl(61, 70%, 70%);
131+
display: grid;
132+
place-items: center;
133+
margin-block: 7%;
134+
border-radius: 10px;
135+
transition: 400ms;
136+
}
137+
138+
.card:nth-child(2n){
139+
translate: 100%;
140+
opacity: 0;
141+
}
142+
.card:nth-child(2n + 1){
143+
translate: -100%;
144+
opacity: 0;
145+
}
146+
.card.shown {
147+
translate: 0;
148+
opacity: 1;
149+
}
150+
```
151+
152+
### script.js
153+
```js
154+
import scrollObserver from '../index.js'
155+
scrollObserver('.card')
156+
```
157+
158+
See above example [Live](https://codeabinash.github.io/scroll-observer/example/)

‎example/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Scroll Observer</title>
8+
<script src="./script.js" type="module" defer></script>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="card">
14+
<h1>Scroll Observer</h1>
15+
</div>
16+
<div class="card">
17+
<h1>Scroll Observer</h1>
18+
</div>
19+
<div class="card">
20+
<h1>Scroll Observer</h1>
21+
</div>
22+
<div class="card">
23+
<h1>Scroll Observer</h1>
24+
</div>
25+
<div class="card">
26+
<h1>Scroll Observer</h1>
27+
</div>
28+
<div class="card">
29+
<h1>Scroll Observer</h1>
30+
</div>
31+
<div class="card">
32+
<h1>Scroll Observer</h1>
33+
</div>
34+
<div class="card">
35+
<h1>Scroll Observer</h1>
36+
</div>
37+
</body>
38+
</html>

‎example/script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import scrollObserver from '../index.js'
2+
3+
4+
5+
// function scrollCallback(selector, )
6+
7+
8+
// const options = {
9+
// // root : document.querySelector('#elem'),
10+
// // rootMargin : '-50px',
11+
// // threshold: 1,
12+
// // once: true,
13+
// onshow: function (entry) {
14+
15+
// },
16+
// onhide: function (entry) {
17+
// console.log(entry)
18+
// },
19+
// threshold: [0, 0.25, 0.5, 0.75, 1]
20+
// }
21+
22+
23+
24+
scrollObserver('.card')
25+
26+
// scrollObserver('.fade', { onshow: () => console.log("Showing...") })
27+
// scrollObserver('.size', options)
28+
29+

‎example/style.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
*{
2+
font-family: Arial, Helvetica, sans-serif;
3+
}
4+
body{
5+
overflow-x: hidden;
6+
}
7+
8+
.card{
9+
width: min(90%, 500px);
10+
aspect-ratio: 2 / 1;
11+
margin-inline: auto;
12+
background-color: hsl(61, 70%, 70%);
13+
display: grid;
14+
place-items: center;
15+
margin-block: 7%;
16+
border-radius: 10px;
17+
transition: 400ms;
18+
}
19+
20+
.card:nth-child(2n){
21+
translate: 100%;
22+
opacity: 0;
23+
}
24+
.card:nth-child(2n + 1){
25+
translate: -100%;
26+
opacity: 0;
27+
}
28+
.card.shown {
29+
translate: 0;
30+
opacity: 1;
31+
}

‎index.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
*
3+
* @param {String | String[]} selector css selector or array of css selector
4+
* @param {Object} option options for scrollObserver
5+
*/
6+
7+
8+
export default function scrollObserver(selector, option) {
9+
let showCount = 0
10+
let observer = new IntersectionObserver((entries) => {
11+
entries.forEach(entry => {
12+
if (option?.once) {
13+
if (showCount === 0 && entry.isIntersecting) {
14+
entry.target.classList.add('shown')
15+
option.onshow ? option.onshow(entry) : false
16+
showCount++
17+
}
18+
}
19+
else {
20+
if (entry.isIntersecting) {
21+
entry.target.classList.add('shown')
22+
if (option && option.onshow) option.onshow(entry)
23+
}
24+
else {
25+
entry.target.classList.remove('shown')
26+
if (option && option.onhide) option.onhide(entry)
27+
}
28+
}
29+
})
30+
}, option)
31+
32+
if (Array.isArray(selector))
33+
selector.forEach(qAll)
34+
else
35+
qAll(selector)
36+
37+
38+
function qAll(selector) {
39+
const item = document.querySelectorAll(selector)
40+
item.forEach(i => observer.observe(i))
41+
}
42+
}

0 commit comments

Comments
 (0)