173 lines
3.3 KiB
JavaScript
Vendored
173 lines
3.3 KiB
JavaScript
Vendored
// let isPass = false;
|
|
// let heightOfsset = 0;
|
|
// let heightElt = 0;
|
|
|
|
var app = {
|
|
init: () => {
|
|
window.onscroll = function () {
|
|
app.scrollFunction();
|
|
};
|
|
|
|
app.scroll();
|
|
},
|
|
|
|
scroll: () => {
|
|
|
|
document
|
|
.getElementById("backtotop")
|
|
.addEventListener("click", function () {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
});
|
|
},
|
|
|
|
scrollFunction: () => {
|
|
let imgZoom = document.querySelectorAll('.img-zoom');
|
|
let index = 0;
|
|
if (
|
|
document.body.scrollTop > 100 ||
|
|
document.documentElement.scrollTop > 100
|
|
) {
|
|
document.getElementById("backtotop").style.display = "flex";
|
|
for (index = 0; index < imgZoom.length; index++) {
|
|
imgZoom[index].classList.add('zoomed');
|
|
}
|
|
} else {
|
|
document.getElementById("backtotop").style.display = "none";
|
|
for (index = 0; index < imgZoom.length; index++) {
|
|
imgZoom[index].classList.remove('zoomed');
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
// FONCTION PERMETTANT DE FAIRE UN EFFET ANIMATION AU DEFILEMENT
|
|
const ratio = 0.1; // 10% du div revelé pour rendre visible
|
|
const options = {
|
|
root: null, // Zone d'affichage : null = le viewport
|
|
rootMargin: "0px",
|
|
threshold: ratio,
|
|
};
|
|
var animArray = [
|
|
"bounce",
|
|
"flash",
|
|
"pulse",
|
|
"rubberBand",
|
|
"shakeX",
|
|
"shakeY",
|
|
"headShake",
|
|
"swing",
|
|
"tada",
|
|
"wobble",
|
|
"jello",
|
|
"heartBeat",
|
|
"backInDown",
|
|
"backInLeft",
|
|
"backInRight",
|
|
"backInUp",
|
|
"backOutDown",
|
|
"backOutLeft",
|
|
"backOutRight",
|
|
"backOutUp",
|
|
"bounceIn",
|
|
"bounceInDown",
|
|
"bounceInLeft",
|
|
"bounceInRight",
|
|
"bounceInUp",
|
|
"bounceOut",
|
|
"bounceOutDown",
|
|
"bounceOutLeft",
|
|
"bounceOutRight",
|
|
"bounceOutUp",
|
|
"fadeIn",
|
|
"fadeInDown",
|
|
"fadeInDownBig",
|
|
"fadeInLeft",
|
|
"fadeInLeftBig",
|
|
"fadeInRight",
|
|
"fadeInRightBig",
|
|
"fadeInUp",
|
|
"fadeInUpBig",
|
|
"fadeInTopLeft",
|
|
"fadeInTopRight",
|
|
"fadeInBottomLeft",
|
|
"fadeInBottomRight",
|
|
"fadeOut",
|
|
"fadeOutDown",
|
|
"fadeOutDownBig",
|
|
"fadeOutLeft",
|
|
"fadeOutLeftBig",
|
|
"fadeOutRight",
|
|
"fadeOutRightBig",
|
|
"fadeOutUp",
|
|
"fadeOutUpBig",
|
|
"fadeOutTopLeft",
|
|
"fadeOutTopRight",
|
|
"fadeOutBottomRight",
|
|
"fadeOutBottomLeft",
|
|
"flip",
|
|
"flipInX",
|
|
"flipInY",
|
|
"flipOutX",
|
|
"flipOutY",
|
|
"lightSpeedInRight",
|
|
"lightSpeedInLeft",
|
|
"lightSpeedOutRight",
|
|
"lightSpeedOutLeft",
|
|
"rotateIn",
|
|
"rotateInDownLeft",
|
|
"rotateInDownRight",
|
|
"rotateInUpLeft",
|
|
"rotateInUpRight",
|
|
"rotateOut",
|
|
"rotateOutDownLeft",
|
|
"rotateOutDownRight",
|
|
"rotateOutUpLeft",
|
|
"rotateOutUpRight",
|
|
"hinge",
|
|
"jackInTheBox",
|
|
"rollIn",
|
|
"rollOut",
|
|
"zoomIn",
|
|
"zoomInDown",
|
|
"zoomInLeft",
|
|
"zoomInRight",
|
|
"zoomInUp",
|
|
"zoomOut",
|
|
"zoomOutDown",
|
|
"zoomOutLeft",
|
|
"zoomOutRight",
|
|
"zoomOutUp",
|
|
"slideInDown",
|
|
"slideInLeft",
|
|
"slideInRight",
|
|
"slideInUp",
|
|
"slideOutDown",
|
|
"slideOutLeft",
|
|
"slideOutRight",
|
|
"slideOutUp",
|
|
];
|
|
/**
|
|
*
|
|
* @param {IntersectionObserverEntry[]} entries
|
|
* @param {IntersectionObserver} observer
|
|
*/
|
|
const handleIntersect = function (entries, observer) {
|
|
entries.forEach(function (entry) {
|
|
if (entry.intersectionRatio > ratio) {
|
|
for (var i = 0; i < animArray.length; i++) {
|
|
if (entry.target.classList.contains(animArray[i])) {
|
|
entry.target.classList.add("animate__" + animArray[i]);
|
|
entry.target.classList.add("reveal-visible");
|
|
observer.unobserve(entry.target);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
const observer = new IntersectionObserver(handleIntersect, options);
|
|
document.querySelectorAll(".animate__animated").forEach(function (r) {
|
|
observer.observe(r);
|
|
});
|