58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
// src/resources/js/scrollfx/index.js
|
||
|
||
import ScrollEngine from './ScrollEngine.js';
|
||
import ScrollTrigger from './ScrollTrigger.js';
|
||
import {fadeScrollTrigger, fixedZoomScrollTrigger, zoomScrollTrigger} from "./Tween";
|
||
|
||
export function createTrigger(config) {
|
||
const elements = typeof config.element === 'string'
|
||
? document.querySelectorAll(config.element)
|
||
: [config.element];
|
||
|
||
const triggers = [];
|
||
|
||
elements.forEach(el => {
|
||
const trigger = new ScrollTrigger({ ...config, element: el });
|
||
ScrollEngine.register(trigger);
|
||
triggers.push(trigger);
|
||
});
|
||
|
||
return triggers.length === 1 ? triggers[0] : triggers;
|
||
}
|
||
|
||
export function init(config = {}) {
|
||
const {
|
||
selector = '.fade-in-on-scroll, .zoom-in, .fade-out, .fade',
|
||
offset = 0.85, // z.B. 85 % Viewport-Höhe
|
||
baseDelay = 0.05, // delay pro Element (stagger)
|
||
once = true // nur 1× triggern?
|
||
} = config;
|
||
|
||
const elements = Array.from(document.querySelectorAll(selector))
|
||
.map(el => ({ el, triggered: false }));
|
||
|
||
function update() {
|
||
const triggerY = window.innerHeight * offset;
|
||
|
||
elements.forEach((obj, index) => {
|
||
if (obj.triggered && once) return;
|
||
|
||
const rect = obj.el.getBoundingClientRect();
|
||
|
||
if (rect.top < triggerY) {
|
||
obj.el.style.transitionDelay = `${index * baseDelay}s`;
|
||
obj.el.classList.add('visible', 'entered');
|
||
obj.el.classList.remove('fade-out');
|
||
obj.triggered = true;
|
||
} else if (!once) {
|
||
obj.el.classList.remove('visible', 'entered');
|
||
obj.triggered = false;
|
||
}
|
||
});
|
||
|
||
requestAnimationFrame(update);
|
||
}
|
||
|
||
requestAnimationFrame(update);
|
||
}
|