130 Zeilen
4.3 KiB
JavaScript
130 Zeilen
4.3 KiB
JavaScript
/**
|
|
* Section Transitions & Effects
|
|
* Modern animations for section dividers
|
|
*/
|
|
|
|
const SectionTransitions = {
|
|
init() {
|
|
this.initParticleBridge();
|
|
this.initScrollReveal();
|
|
this.initWaveAnimation();
|
|
this.initParallaxDividers();
|
|
},
|
|
|
|
// Animated particles between sections
|
|
initParticleBridge() {
|
|
const bridge = document.getElementById('particleBridge');
|
|
if (!bridge) return;
|
|
|
|
// Create floating particles
|
|
for (let i = 0; i < 30; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'particle';
|
|
particle.style.left = Math.random() * 100 + '%';
|
|
particle.style.animationDelay = Math.random() * 5 + 's';
|
|
particle.style.animationDuration = (5 + Math.random() * 5) + 's';
|
|
particle.style.animation = `floatParticle ${5 + Math.random() * 5}s linear infinite`;
|
|
bridge.appendChild(particle);
|
|
}
|
|
},
|
|
|
|
// Reveal sections on scroll
|
|
initScrollReveal() {
|
|
const sections = document.querySelectorAll('.fade-section');
|
|
|
|
const revealSection = (entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
|
|
// Add shimmer effect on reveal
|
|
const shimmer = document.createElement('div');
|
|
shimmer.style.cssText = `
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(15, 114, 181, 0.2), transparent);
|
|
animation: shimmerPass 1s ease-out forwards;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
`;
|
|
entry.target.style.position = 'relative';
|
|
entry.target.appendChild(shimmer);
|
|
|
|
setTimeout(() => shimmer.remove(), 1000);
|
|
}
|
|
});
|
|
};
|
|
|
|
const observer = new IntersectionObserver(revealSection, {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -100px 0px'
|
|
});
|
|
|
|
sections.forEach(section => observer.observe(section));
|
|
},
|
|
|
|
// Animate wave dividers
|
|
initWaveAnimation() {
|
|
const waves = document.querySelectorAll('.wave-divider path');
|
|
|
|
waves.forEach(wave => {
|
|
let time = 0;
|
|
const animateWave = () => {
|
|
time += 0.02;
|
|
const points = [];
|
|
|
|
for (let i = 0; i <= 10; i++) {
|
|
const x = (i / 10) * 1200;
|
|
const y = Math.sin((i / 10) * Math.PI * 2 + time) * 10 + 56;
|
|
points.push(`${x},${y}`);
|
|
}
|
|
|
|
// Create smooth wave path
|
|
const d = `M0,56 Q${points[2]} T${points[4]} T${points[6]} T${points[8]} T1200,56 L1200,0 L0,0 Z`;
|
|
wave.setAttribute('d', d);
|
|
|
|
requestAnimationFrame(animateWave);
|
|
};
|
|
|
|
// Start wave animation
|
|
// animateWave(); // Commented out for performance, uncomment for wave motion
|
|
});
|
|
},
|
|
|
|
// Parallax effect for dividers
|
|
initParallaxDividers() {
|
|
const dividers = document.querySelectorAll('.blob-divider, .gradient-divider, .flow-lines');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const scrolled = window.pageYOffset;
|
|
|
|
dividers.forEach(divider => {
|
|
const speed = divider.dataset.speed || 0.5;
|
|
const yPos = -(scrolled * speed);
|
|
divider.style.transform = `translateY(${yPos}px)`;
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
// Add shimmer animation
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes shimmerPass {
|
|
to {
|
|
left: 100%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// Initialize when DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => SectionTransitions.init());
|
|
} else {
|
|
SectionTransitions.init();
|
|
} |