https://meilensteine-diabetologie.de/_content/LiveIcom/Icom/_IcomParallax.js

1const controller = new ScrollMagic.Controller();
2const parallaxSections = [...document.querySelectorAll('.parallax-section')];
3
4
5
6window.initParallax = function(element) {
7    // console.log("initParallax");
8    // console.log(element);
9    let parallaxSection = element;
10    if(typeof element === "string") {
11        parallaxSection = document.getElementById(element);
12    }
13
14    if(!parallaxSection) return;
15
16    const bg = parallaxSection.querySelector(".bg"); // this element exist!!!!!!!!!!!!!!!!!!!!
17    
18    const fixedParam = parallaxSection.dataset.fixed;
19    const isFixed =  fixedParam == "true" || fixedParam == "";
20    
21    const scrollPaddingFromSet = parseInt(parallaxSection.dataset.scrollPadding);
22    let scrollPadding = isNaN(scrollPaddingFromSet) ? 100 : scrollPaddingFromSet;
23    
24    const scrollPaddingMobileFromSet = parseInt(parallaxSection.dataset.scrollPaddingMobile);
25    let scrollPaddingMobile = isNaN(scrollPaddingMobileFromSet) ? 50 : scrollPaddingMobileFromSet;
26
27    let padding = () => window.innerWidth > 768 ? scrollPadding : scrollPaddingMobile;
28    let timeline;
29    let setInitials = () => {};
30    let initAnimation = () => {};
31    let scrollTrigger;
32
33    if(isFixed) {
34        setInitials = () => {
35            gsap.set(bg, {
36                y: 0,
37                height: `calc(100% + ${padding()}px)`,
38            })
39        }
40        initAnimation = () => {
41            timeline = gsap.to(bg, {
42                y: () => padding(),
43                ease: "linear",
44            })
45        }
46    }
47    else {
48        setInitials = () => {
49            gsap.set(bg, {
50                y: -(padding())*2,
51                height: `calc(100% + ${padding()*2}px)`,
52            })
53        }
54        initAnimation = () => {
55            timeline = gsap.to(bg, {
56                y: 0, 
57                ease: "linear",
58            });
59        }
60    }
61
62    const inits = () => {
63        timeline?.kill?.()
64        scrollTrigger?.destroy?.();
65        setInitials();
66        initAnimation();
67        scrollTrigger = new ScrollMagic.Scene({
68            triggerElement: parallaxSection,
69            triggerHook: isFixed ? -1 : 1,
70            duration: window.innerHeight + (isFixed ? 0 : parallaxSection.clientHeight),
71        })
72        .setTween(timeline)
73        .addTo(controller);
74    }
75    window.addEventListener('resize', inits);
76    inits();
77}
78
79parallaxSections.forEach(window.initParallax);