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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
/*
Some code extracted from https://github.com/julianlloyd/scrollReveal.js
which happens to be a trending Javascript repo with an MIT license at
the time I was working on Javascript userdiff support in libgit2
I extracted just some of the code, so I suspect this is no longer valid
Javascript code, but it contains enough example patterns to work.
*/
;(function (window) {
'use strict';
var docElem = window.document.documentElement;
function getViewportH () {
var client = docElem['clientHeight'],
inner = window['innerHeight'];
return (client < inner) ? inner : client;
}
function getOffset (el) {
var offsetTop = 0,
offsetLeft = 0;
do {
if (!isNaN(el.offsetTop)) {
offsetTop += el.offsetTop;
}
if (!isNaN(el.offsetLeft)) {
offsetLeft += el.offsetLeft;
}
} while (el = el.offsetParent)
return {
top: offsetTop,
left: offsetLeft
}
}
function isElementInViewport (el, h) {
var scrolled = window.pageYOffset,
viewed = scrolled + getViewportH(),
elH = el.offsetHeight,
elTop = getOffset(el).top,
elBottom = elTop + elH,
h = h || 0;
return (elTop + elH * h) <= viewed && (elBottom) >= scrolled;
}
scrollReveal.prototype = {
_init: function () {
var self = this;
this.elems = Array.prototype.slice.call(docElem.querySelectorAll('[data-scrollReveal]'));
this.scrolled = false;
// Initialize all scrollreveals, triggering all
// reveals on visible elements.
this.elems.forEach(function (el, i) {
self.animate(el);
});
var scrollHandler = function () {
if (!self.scrolled) {
self.scrolled = true;
setTimeout(function () {
self._scrollPage();
}, 60);
}
};
var resizeHandler = function () {
function delayed() {
self._scrollPage();
self.resizeTimeout = null;
}
if (self.resizeTimeout) {
clearTimeout(self.resizeTimeout);
}
self.resizeTimeout = setTimeout(delayed, 200);
};
window.addEventListener('scroll', scrollHandler, false);
window.addEventListener('resize', resizeHandler, false);
},
/*=============================================================================*/
_scrollPage: function () {
var self = this;
this.elems.forEach(function (el, i) {
if (isElementInViewport(el, self.options.viewportFactor)) {
self.animate(el);
}
});
this.scrolled = false;
},
}; // end scrollReveal.prototype
document.addEventListener("DOMContentLoaded", function (evt) {
window.scrollReveal = new scrollReveal();
});
})(window);
|