-
Notifications
You must be signed in to change notification settings - Fork 3
/
viewport-example.ts
82 lines (74 loc) · 1.9 KB
/
viewport-example.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
* inViewport Example
*
* @format
*/
import inViewport from './inviewport';
// const inViewport = require('./inviewport').default;
document.addEventListener('DOMContentLoaded', (): void => {
const verticalScrollContainer: HTMLElement | null = document.querySelector(
'.vertical-scroll-example'
);
const horizontalScrollContainer: HTMLElement | null = document.querySelector(
'.horizontal-scroll-example'
);
const shrug: HTMLElement | null = document.querySelector('.shrug');
/**
* Build Vertical Tiles.
*/
const setupShrug: Function = (): void => {
if (shrug) {
inViewport(shrug, 0.5, [
() => {
shrug.classList.add('visible');
},
() => {
shrug.classList.remove('visible');
},
]);
}
};
/**
* Build Tiles.
*/
const buildTiles: Function = (
orientation: string,
container: HTMLElement
): void => {
for (let i = 0; i < 9; i++) {
const tile: HTMLElement = document.createElement('div');
tile.classList.add(orientation);
container.appendChild(tile);
if (orientation === 'vertical-tile') {
inViewport(tile, 1, [
() => {
tile.classList.add('visible');
},
() => {
tile.classList.remove('visible');
},
]);
} else {
inViewport(tile, 0.5, () => {
tile.classList.add('visible');
});
}
}
};
/**
* Initialize Example.
*/
const initializeExample: Function = (): void => {
if (verticalScrollContainer) {
buildTiles('vertical-tile', verticalScrollContainer);
}
if (horizontalScrollContainer) {
buildTiles('horizontal-tile', horizontalScrollContainer);
inViewport(horizontalScrollContainer, 0.01, () => {
horizontalScrollContainer.classList.add('visible');
});
}
setupShrug();
};
initializeExample();
});