-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
60 lines (48 loc) · 1.81 KB
/
app.js
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
// // source online
// // https://mikkegoes.com/javascript-projects-for-beginners/
// // source code from codepen
// // https://codepen.io/tutsplus/pen/QNeJgR
// (function () {
// "use strict";
// // define variables
// var items = document.querySelectorAll(".timeline li");
// // check if an element is in viewport
// // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
// function isElementInViewport(el) {
// var rect = el.getBoundingClientRect();
// return;
// }
// function callbackFunc() {
// for (var i = 0; i < items.length; i++) {
// if (isElementInViewport(items[i])) {
// items[i].classList.add("in-inview");
// }
// }
// }
// // listen for events
// window.addEventListener("load", callbackFunc);
// window.addEventListener("resize", callbackFunc);
// window.addEventListener("scroll", callbackFunc);
// })();
(function () {
"use strict";
// define variables
var items = document.querySelectorAll(".timeline li");
// check if an element is in viewport
// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
}
function callbackFunc() {
for (var i = 0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
items[i].classList.add("in-view");
}
}
}
// listen for events
window.addEventListener("load", callbackFunc);
window.addEventListener("resize", callbackFunc);
window.addEventListener("scroll", callbackFunc);
})();