ldc-doux/resources/js/app.js

// 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');
            }
        }


        // if (isFriseHover) {
        //     if (!isPass) {
        //         heightOfsset = window.scrollY;
        //         heightElt = document.querySelector(".timeline").clientHeight;
        //         console.log("heightElt=" + heightElt);
        //     }

        //     // let wrapper = document.querySelector(".timeline");
        //     // var svgFrise = document.getElementById("frise-svg");

        //     // if (svgFrise === null) return;
        //     // var point1 = document.getElementById("point1"),
        //     //     point2 = document.getElementById("point2");
        //     // $doc = $(document);

        //     // console.log("wrapper.scrollTop=" + wrapper.scrollTop);

        //     let currentHeight = (window.scrollY - heightOfsset) * 100 / heightElt;
        //     console.log("currentHeight=" + currentHeight);

        //     // var scrPos = wrapper.scrollTop / 13;
        //     point1.setAttribute("offset", currentHeight - 15 + '%')
        //     point2.setAttribute("offset", currentHeight - 10 + '%')


        //     // let height = "height:" + currentHeight + "px";
        //     // document.getElementById("frise-autoscroll").setAttribute("style", height);
        //     // console.log(window.scrollY + ":" + height);
        //     isPass = true;
        // } else {
        //     console.log("fin");
        // }
    },
};

document.addEventListener("DOMContentLoaded", app.init);

// 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);
});

// let isFriseHover = false;
// const optionsFrise = {
//     root: null, // Zone d'affichage : null = le viewport
//     rootMargin: "0px",
//     threshold: 0,
// };
// /**
//  *
//  * @param {IntersectionObserverEntry[]} entries
//  * @param {IntersectionObserver} observer
//  */
// const handleFrise = function (entries, observer) {
//     entries.forEach(function (entry) {
//         isFriseHover = entry.isIntersecting;
//     });
// };
// const observerFrise = new IntersectionObserver(handleFrise, optionsFrise);
// document.querySelectorAll(".timeline").forEach(function (r) {
//     observerFrise.observe(r);
// });