62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
/**
|
|
* animate-in.js 1.0.0
|
|
* Animate elements on entrance
|
|
*
|
|
* Usage:
|
|
*
|
|
* Make sure to add this to the <head> of your page to avoid flickering on load
|
|
* Based on https://andycaygill.github.io/scroll-entrance/
|
|
*/
|
|
(function() {
|
|
|
|
//Set up defaults
|
|
var duration = "1000";
|
|
var heightOffset = 100;
|
|
|
|
|
|
// document.write("<style id='temp-animate-in'>*[class^='animate-in'], *[class*=' animate-in'] {display:none}</style>")
|
|
|
|
function isElementVisible(elem) {
|
|
|
|
var rect = elem.getBoundingClientRect();
|
|
|
|
//Return true if any of the following conditions are met:
|
|
return (
|
|
// The top is in view: the top is more than 0 and less than the window height (the top of the element is in view)
|
|
( (rect.top + heightOffset) >= 0 && (rect.top + heightOffset) <= window.innerHeight ) ||
|
|
// The bottom is in view: bottom position is greater than 0 and greater than the window height
|
|
( (rect.bottom + heightOffset) >= 0 && (rect.bottom + heightOffset) <= window.innerHeight ) ||
|
|
// The top is above the viewport and the bottom is below the viewport
|
|
( (rect.top + heightOffset) < 0 && (rect.bottom + heightOffset) > window.innerHeight )
|
|
)
|
|
|
|
}
|
|
|
|
|
|
function update() {
|
|
var nodes = document.querySelectorAll("*:not(.animate-in-done)[class^='animate-in'], *:not(.animate-in-done)[class*=' animate-in']")
|
|
|
|
for (var i = 0; i < nodes.length; i++) {
|
|
if (isElementVisible(nodes[i])) {
|
|
nodes[i].classList.remove("out-of-viewport")
|
|
nodes[i].classList.add("animate-in-done")
|
|
} else {
|
|
nodes[i].classList.add("out-of-viewport")
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
update()
|
|
// setTimeout(function() {
|
|
// document.querySelector("#temp-animate-in").remove()
|
|
// })
|
|
});
|
|
|
|
window.addEventListener("scroll", function() {
|
|
update()
|
|
})
|
|
|
|
})();
|
|
|