2020-03-31 02:16:08 +08:00
|
|
|
(function () {
|
|
|
|
"use strict";
|
|
|
|
const revealEl = document.querySelectorAll("[class*=reveal-]");
|
|
|
|
let viewportHeight = window.innerHeight;
|
2020-03-24 11:20:28 +08:00
|
|
|
|
2020-03-31 02:16:08 +08:00
|
|
|
function throttle(delay, fn) {
|
|
|
|
var lastCall = 0;
|
2020-03-24 11:20:28 +08:00
|
|
|
return function () {
|
2020-03-31 02:16:08 +08:00
|
|
|
var now = new Date().getTime();
|
2020-03-24 11:20:28 +08:00
|
|
|
if (now - lastCall < delay) {
|
2020-03-31 02:16:08 +08:00
|
|
|
return;
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
2020-03-31 02:16:08 +08:00
|
|
|
lastCall = now;
|
|
|
|
return fn.apply(void 0, arguments);
|
|
|
|
};
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
|
|
|
|
2020-03-31 02:16:08 +08:00
|
|
|
function elementIsVisible(el, offset) {
|
|
|
|
return el.getBoundingClientRect().top <= viewportHeight - offset;
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
|
|
|
|
2020-03-31 02:16:08 +08:00
|
|
|
function revealElements() {
|
2020-03-24 11:20:28 +08:00
|
|
|
for (let i = 0; i < revealEl.length; i++) {
|
2020-03-31 02:16:08 +08:00
|
|
|
let el = revealEl[i];
|
|
|
|
let revealDelay = el.getAttribute("data-reveal-delay");
|
|
|
|
let revealOffset = el.getAttribute("data-reveal-offset")
|
|
|
|
? el.getAttribute("data-reveal-offset")
|
|
|
|
: "200";
|
|
|
|
let listenedEl = el.getAttribute("data-reveal-container")
|
|
|
|
? el.closest(el.getAttribute("data-reveal-container"))
|
|
|
|
: el;
|
|
|
|
if (
|
|
|
|
elementIsVisible(listenedEl, revealOffset) &&
|
|
|
|
!el.classList.contains("is-revealed")
|
|
|
|
) {
|
2020-03-24 11:20:28 +08:00
|
|
|
if (revealDelay && revealDelay !== 0) {
|
|
|
|
setTimeout(function () {
|
2020-03-31 02:16:08 +08:00
|
|
|
el.classList.add("is-revealed");
|
|
|
|
}, revealDelay);
|
2020-03-24 11:20:28 +08:00
|
|
|
} else {
|
2020-03-31 02:16:08 +08:00
|
|
|
el.classList.add("is-revealed");
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-03-31 02:16:08 +08:00
|
|
|
revealDone();
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
|
|
|
|
2020-03-31 02:16:08 +08:00
|
|
|
function revealScroll() {
|
|
|
|
throttle(30, revealElements());
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
|
|
|
|
2020-03-31 02:16:08 +08:00
|
|
|
function revealResize() {
|
|
|
|
viewportHeight = window.innerHeight;
|
|
|
|
throttle(30, revealElements());
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
|
|
|
|
2020-03-31 02:16:08 +08:00
|
|
|
function revealDone() {
|
|
|
|
if (
|
|
|
|
revealEl.length >
|
|
|
|
document.querySelectorAll("[class*=reveal-].is-revealed").length
|
|
|
|
)
|
|
|
|
return;
|
|
|
|
window.removeEventListener("load", revealElements);
|
|
|
|
window.removeEventListener("scroll", revealScroll);
|
|
|
|
window.removeEventListener("resize", revealResize);
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
|
|
|
|
2020-03-31 02:16:08 +08:00
|
|
|
if (
|
|
|
|
revealEl.length > 0 &&
|
|
|
|
document.body.classList.contains("has-animations")
|
|
|
|
) {
|
|
|
|
window.addEventListener("load", revealElements);
|
|
|
|
window.addEventListener("scroll", revealScroll);
|
|
|
|
window.addEventListener("resize", revealResize);
|
2020-03-24 11:20:28 +08:00
|
|
|
}
|
2020-03-31 02:16:08 +08:00
|
|
|
})();
|