https://gaffel.de/wp-content/plugins/scroll-layers-divi/assets/js/scroll-layers.js?ver=1.5.0

1/**
2 * Scroll Layers für Divi  v1.5
3 *
4 * Höhe der Szene:
5 *   .sld-scene bekommt padding-bottom als inline-style aus PHP.
6 *   sticky.offsetHeight = Szenenhöhe (padding-bottom × Breite).
7 *   Kein img-Laden abwarten – Höhe ist sofort bekannt.
8 *
9 * Fallback (wenn PHP-Ratio nicht verfügbar):
10 *   JS lädt das Hintergrundbild, misst naturalWidth/naturalHeight
11 *   und setzt padding-bottom nach.
12 *
13 * Scroll-Animation:
14 *   Erster Layer (data-initial="1") ist sofort sichtbar, kein Scroll-Slot.
15 *   Alle weiteren Layer haben einen eigenen Scroll-Slot (data-scroll px).
16 *   translateY läuft von 100% → 0%, sequenziell.
17 */
18
19(function () {
20	'use strict';
21
22	var instances = [];
23
24	// ── Initialisierung ──────────────────────────────────────────────────────
25
26	function init() {
27		document.querySelectorAll('.sld-wrapper').forEach(function (wrapper) {
28			var sticky = wrapper.querySelector('.sld-sticky');
29			var scene  = wrapper.querySelector('.sld-scene');
30			var layers = Array.from(wrapper.querySelectorAll('.sld-layer--overlay'));
31
32			if (!sticky || !scene || !layers.length) return;
33
34			var inst = { wrapper: wrapper, sticky: sticky, scene: scene, layers: layers };
35			instances.push(inst);
36
37			var sceneH = scene.offsetHeight;
38
39			if (sceneH > 0) {
40				// Höhe bereits durch PHP padding-bottom gesetzt
41				setWrapperHeight(inst);
42			} else {
43				// Fallback: Hintergrundbild laden und Ratio ermitteln
44				applyRatioFromBg(inst);
45			}
46		});
47
48		if (instances.length) {
49			window.addEventListener('scroll', onScroll, { passive: true });
50			window.addEventListener('resize', onResize, { passive: true });
51			onScroll();
52		}
53	}
54
55	// ── Fallback: Ratio aus Hintergrundbild ermitteln ────────────────────────
56
57	function applyRatioFromBg(inst) {
58		var bgDiv = inst.scene.querySelector('.sld-layer--bg');
59		if (!bgDiv) return;
60
61		var bgStyle = bgDiv.style.backgroundImage || '';
62		var match   = bgStyle.match(/url\(['"]?([^'"()]+)['"]?\)/);
63		if (!match) return;
64
65		var img   = new Image();
66		img.onload = function () {
67			if (img.naturalWidth > 0 && img.naturalHeight > 0) {
68				var ratio = (img.naturalHeight / img.naturalWidth * 100).toFixed(4) + '%';
69				inst.scene.style.setProperty('padding-bottom', ratio, 'important');
70			}
71			setWrapperHeight(inst);
72			onScroll();
73		};
74		img.onerror = function () {
75			// Letzter Ausweg: 16:9
76			inst.scene.style.setProperty('padding-bottom', '56.25%', 'important');
77			setWrapperHeight(inst);
78		};
79		img.src = match[1];
80	}
81
82	// ── Wrapper-Höhe setzen ──────────────────────────────────────────────────
83
84	function setWrapperHeight(inst) {
85		var sceneH      = inst.sticky.offsetHeight; // = .sld-scene height via padding-bottom
86		var totalScroll = inst.layers.reduce(function (s, l) {
87			// Erster Layer (data-initial) ist sofort sichtbar – kein Scroll-Slot
88			if (l.dataset.initial === '1') return s;
89			return s + getScrollDistance(l);
90		}, 0);
91		inst.wrapper.style.height = (sceneH + totalScroll) + 'px';
92	}
93
94	function getScrollDistance(layer) {
95		return parseInt(layer.dataset.scroll, 10) || 400;
96	}
97
98	// ── Scroll-Animation ─────────────────────────────────────────────────────
99
100	function onScroll() {
101		instances.forEach(function (inst) {
102			var rect     = inst.wrapper.getBoundingClientRect();
103			var scrolled = -rect.top;
104			var offset   = 0;
105
106			inst.layers.forEach(function (layer) {
107				// Erster Layer bleibt immer sichtbar
108				if (layer.dataset.initial === '1') {
109					layer.style.transform = 'translateY(0%)';
110					return;
111				}
112
113				var dist  = getScrollDistance(layer);
114				var start = offset;
115				var end   = offset + dist;
116				var ty;
117
118				if      (scrolled <= start) ty = 100;
119				else if (scrolled >= end)   ty = 0;
120				else                        ty = (1 - (scrolled - start) / dist) * 100;
121
122				layer.style.transform = 'translateY(' + ty.toFixed(4) + '%)';
123				offset = end;
124			});
125		});
126	}
127
128	// ── Resize ───────────────────────────────────────────────────────────────
129
130	function onResize() {

131		instances.forEach(setWrapperHeight);
132		onScroll();
133	}
134
135	// ── Start ────────────────────────────────────────────────────────────────
136
137	if (document.readyState === 'loading') {
138		document.addEventListener('DOMContentLoaded', init);
139	} else {
140		init();
141	}
142
143})();