126 lines
3.0 KiB
JavaScript
126 lines
3.0 KiB
JavaScript
/*
|
||
const menu = document.getElementById("sidebar-menu");
|
||
const closeBtn = menu.querySelector(".close-btn");
|
||
|
||
closeBtn.addEventListener("click", () => {
|
||
menu.hidePopover();
|
||
});
|
||
*/
|
||
|
||
|
||
import {registerModules} from "../modules";
|
||
|
||
import {useEvent} from "./useEvent";
|
||
|
||
|
||
|
||
/*import { createTrigger, destroyTrigger, destroyAllTriggers } from './scrollfx/index.js';
|
||
|
||
createTrigger({
|
||
element: 'section',
|
||
target: '.fade',
|
||
start: 'top 80%',
|
||
end: 'bottom 30%',
|
||
scrub: true,
|
||
onUpdate: (() => {
|
||
const progressMap = new WeakMap();
|
||
|
||
return (el, progress) => {
|
||
if (!el) return;
|
||
|
||
let current = progressMap.get(el) || 0;
|
||
current += (progress - current) * 0.1;
|
||
progressMap.set(el, current);
|
||
|
||
el.style.opacity = current;
|
||
el.style.transform = `translateY(${30 - 30 * current}px)`;
|
||
};
|
||
})(),
|
||
|
||
onEnter: el => el.classList.add('entered'),
|
||
onLeave: el => {
|
||
el.classList.remove('entered');
|
||
el.style.opacity = 0;
|
||
el.style.transform = 'translateY(30px)';
|
||
}
|
||
});*/
|
||
|
||
|
||
|
||
|
||
|
||
/*
|
||
let lastScrollY = window.scrollY;
|
||
|
||
const fadeElements = document.querySelectorAll('.fade-in-on-scroll');
|
||
|
||
// Observer 1: Einblenden beim Runterscrollen
|
||
const fadeInObserver = new IntersectionObserver((entries) => {
|
||
const scrollingDown = window.scrollY > lastScrollY;
|
||
lastScrollY = window.scrollY;
|
||
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting && scrollingDown) {
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.4,
|
||
rootMargin: '0px 0px -10% 0px'
|
||
});
|
||
|
||
// Observer 2: Ausblenden beim Hochscrollen
|
||
const fadeOutObserver = new IntersectionObserver((entries) => {
|
||
const scrollingUp = window.scrollY < lastScrollY;
|
||
lastScrollY = window.scrollY;
|
||
|
||
entries.forEach(entry => {
|
||
if (!entry.isIntersecting && scrollingUp) {
|
||
entry.target.classList.remove('visible');
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.5,
|
||
rootMargin: '0% 0px 50% 0px' // früher triggern beim Hochscrollen
|
||
});
|
||
|
||
// Alle Elemente mit beiden Observern beobachten
|
||
fadeElements.forEach(el => {
|
||
fadeInObserver.observe(el);
|
||
fadeOutObserver.observe(el);
|
||
});
|
||
*/
|
||
|
||
|
||
/*
|
||
const newContent = '<h1>Neue Seite</h1>'; // dein AJAX-Inhalt z. B.
|
||
const container = document.querySelector('main');
|
||
|
||
document.startViewTransition(() => {
|
||
container.innerHTML = newContent;
|
||
});*/
|
||
|
||
import { fadeScrollTrigger, zoomScrollTrigger, fixedZoomScrollTrigger } from '../modules/scrollfx/Tween.js';
|
||
import {autoLoadResponsiveVideos} from "../utils/autoLoadResponsiveVideo";
|
||
|
||
|
||
export async function initApp() {
|
||
|
||
await registerModules();
|
||
|
||
autoLoadResponsiveVideos();
|
||
|
||
/*initNoiseToggle({
|
||
selector: '.noise-overlay',
|
||
toggleKey: 'g', // Taste zum Umschalten
|
||
className: 'grainy', // Klasse auf <body>
|
||
enableTransition: true // Smooth fade
|
||
});
|
||
|
||
|
||
fadeScrollTrigger('.fade');
|
||
zoomScrollTrigger('.zoomed');
|
||
|
||
fixedZoomScrollTrigger('h1');*/
|
||
}
|