accelerator-assets-js-homepage

/**
* STARTPLATZ Website JavaScript
* Modular structure with separated concerns
*/

// =============================================================================
// 1. SMOOTH SCROLLING MODULE
// =============================================================================
const SmoothScrolling = {
init() {
document.querySelectorAll(‚a[href^=“#“]‘).forEach(anchor => {
anchor.addEventListener(‚click‘, this.handleAnchorClick.bind(this));
});
},

handleAnchorClick(e) {
e.preventDefault();
const target = document.querySelector(e.target.getAttribute(‚href‘));
if (target) {
this.smoothScrollTo(target.offsetTop – 100, 900);
}
},

smoothScrollTo(targetPosition, duration) {
const startPosition = window.pageYOffset;
const distance = targetPosition – startPosition;
let startTime = null;

const animation = (currentTime) => {
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime – startTime;
const progress = Math.min(timeElapsed / duration, 1);
const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress; window.scrollTo(0, startPosition + distance * ease); if (timeElapsed < duration) { requestAnimationFrame(animation); } }; requestAnimationFrame(animation); } }; // ============================================================================= // 2. FADE-IN ANIMATIONS MODULE // ============================================================================= const FadeInAnimations = { init() { const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; this.observer = new IntersectionObserver(this.handleIntersection, observerOptions); document.querySelectorAll('.fade-in').forEach(el => {
this.observer.observe(el);
});
},

handleIntersection(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‚visible‘);
}
});
}
};

// =============================================================================
// 3. STICKY CTA MODULE
// =============================================================================
const StickyCTA = {
init() {
this.stickyCTA = document.getElementById(’stickyCTA‘);
this.hero = document.querySelector(‚.hero‘);

if (this.stickyCTA && this.hero) {
window.addEventListener(’scroll‘, this.handleScroll.bind(this));
}
},

handleScroll() {
const heroBottom = this.hero.offsetTop + this.hero.offsetHeight;
const scrollPosition = window.pageYOffset;

if (scrollPosition > heroBottom) {
this.stickyCTA.classList.add(’show‘);
} else {
this.stickyCTA.classList.remove(’show‘);
}
}
};

// =============================================================================
// 4. PARTNERSHIP SLIDER MODULE
// =============================================================================
const PartnershipSlider = {
currentSlide: 0,
touchStartX: 0,
touchEndX: 0,
touchStartY: 0,
touchEndY: 0,

init() {
this.slider = document.getElementById(‚partnershipSlider‘);
if (!this.slider) return;

this.setupEventListeners();
this.updateNavigation();
},

setupEventListeners() {
// Touch events
this.slider.addEventListener(‚touchstart‘, this.handleTouchStart.bind(this));
this.slider.addEventListener(‚touchend‘, this.handleTouchEnd.bind(this));

// Resize event
window.addEventListener(‚resize‘, this.handleResize.bind(this));
},

slide(direction) {
const isMobile = window.innerWidth <= 768; this.currentSlide += direction; if (isMobile) { // Mobile: 4 Cards, eine pro Ansicht (0,1,2,3) - GEÄNDERT VON 5 auf 4 const maxSlide = 3; // GEÄNDERT VON 4 auf 3 this.currentSlide = Math.max(0, Math.min(this.currentSlide, maxSlide)); const translateX = this.currentSlide * 21; // GEÄNDERT VON 21 auf 25 (100%/4 = 25%) this.slider.style.transform = `translateX(-${translateX}%)`; } else { // Desktop: 4 Cards, 3 Slides für alle Positionen (0,1,2) - bleibt gleich const maxSlide = 2; this.currentSlide = Math.max(0, Math.min(this.currentSlide, maxSlide)); const translateX = this.currentSlide * 20; // GEÄNDERT VON 20 auf 33.33 (100%/3 = 33.33%) this.slider.style.transform = `translateX(-${translateX}%)`; } this.updateNavigation(); }, goToSlide(slide) { const isMobile = window.innerWidth <= 768; this.currentSlide = slide; if (isMobile) { const translateX = this.currentSlide * 21; // GEÄNDERT VON 21 auf 25 this.slider.style.transform = `translateX(-${translateX}%)`; } else { const translateX = this.currentSlide * 20; // GEÄNDERT VON 20 auf 33.33 this.slider.style.transform = `translateX(-${translateX}%)`; } this.updateNavigation(); }, updateNavigation() { const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const dotsContainer = document.querySelector('.partnership-section .dots-container'); const isMobile = window.innerWidth <= 768; if (isMobile) { this.updateMobileNavigation(prevBtn, nextBtn, dotsContainer); } else { this.updateDesktopNavigation(prevBtn, nextBtn, dotsContainer); } }, updateMobileNavigation(prevBtn, nextBtn, dotsContainer) { const maxSlide = 3; // GEÄNDERT VON 4 auf 3 // Update buttons if (prevBtn) { prevBtn.style.display = 'flex'; prevBtn.style.opacity = this.currentSlide === 0 ? '0.3' : '1'; prevBtn.disabled = this.currentSlide === 0; } if (nextBtn) { nextBtn.style.display = 'flex'; nextBtn.style.opacity = this.currentSlide === maxSlide ? '0.3' : '1'; nextBtn.disabled = this.currentSlide === maxSlide; } // Update dots - 4 dots for mobile (GEÄNDERT VON 5 auf 4) if (dotsContainer) { this.createDots(dotsContainer, 4); } }, updateDesktopNavigation(prevBtn, nextBtn, dotsContainer) { const maxSlide = 2; // Update buttons if (prevBtn) { prevBtn.style.display = this.currentSlide === 0 ? 'none' : 'flex'; prevBtn.style.opacity = this.currentSlide === 0 ? '0.5' : '1'; prevBtn.disabled = this.currentSlide === 0; } if (nextBtn) { nextBtn.style.display = this.currentSlide === maxSlide ? 'none' : 'flex'; nextBtn.style.opacity = this.currentSlide === maxSlide ? '0.5' : '1'; nextBtn.disabled = this.currentSlide === maxSlide; } // Update dots - 3 dots for desktop (bleibt gleich) if (dotsContainer) { this.createDots(dotsContainer, 3); } }, createDots(container, count) { container.innerHTML = ''; for (let i = 0; i < count; i++) { const dot = document.createElement('span'); dot.className = 'dot'; if (this.currentSlide === i) dot.className += ' active'; dot.onclick = () => this.goToSlide(i);
container.appendChild(dot);
}
},

handleTouchStart(e) {
this.touchStartX = e.changedTouches[0].screenX;
this.touchStartY = e.changedTouches[0].screenY;
},

handleTouchEnd(e) {
this.touchEndX = e.changedTouches[0].screenX;
this.touchEndY = e.changedTouches[0].screenY;
this.handleSwipe();
},

handleSwipe() {
const isMobile = window.innerWidth <= 768; if (!isMobile) return; const swipeThreshold = 50; const diffX = this.touchStartX - this.touchEndX; const diffY = this.touchStartY - this.touchEndY; // Only process horizontal swipes if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > swipeThreshold) {
if (diffX > 0) {
this.slide(1); // Swipe left – next slide
} else {
this.slide(-1); // Swipe right – previous slide
}
}
},

handleResize() {
// Reset to first slide on resize
this.currentSlide = 0;
this.slider.style.transform = ‚translateX(0%)‘;
this.updateNavigation();
}
};

// =============================================================================
// 5. ALUMNI SLIDER MODULE
// =============================================================================
const AlumniSlider = {
currentSlide: 0,

init() {
this.slider = document.getElementById(‚alumniSlider‘);
if (!this.slider) return;

this.setupHoverEffects();
this.updateNavigation();
},

setupHoverEffects() {
const prevBtn = document.getElementById(‚alumniPrevBtn‘);
const nextBtn = document.getElementById(‚alumniNextBtn‘);

[prevBtn, nextBtn].forEach(btn => {
if (btn) {
btn.addEventListener(‚mouseenter‘, this.handleButtonHover.bind(this, btn, true));
btn.addEventListener(‚mouseleave‘, this.handleButtonHover.bind(this, btn, false));
}
});
},

handleButtonHover(button, isHover) {
const isMobile = window.innerWidth <= 768; if (isMobile) return; const scale = isHover ? 'scale(1.1)' : 'scale(1)'; button.style.transform = `translateY(-50%) ${scale}`; }, slide(direction) { const isMobile = window.innerWidth <= 768; if (isMobile) return; // Alumni slider disabled on mobile this.currentSlide += direction; const maxSlide = 3; // 0,1,2,3 = 4 positions for 6 cards this.currentSlide = Math.max(0, Math.min(this.currentSlide, maxSlide)); const translateX = this.currentSlide * 16.66; this.slider.style.transform = `translateX(-${translateX}%)`; this.updateNavigation(); }, goToSlide(slide) { const isMobile = window.innerWidth <= 768; if (isMobile) return; this.currentSlide = slide; const translateX = this.currentSlide * 16.66; this.slider.style.transform = `translateX(-${translateX}%)`; this.updateNavigation(); }, updateNavigation() { const isMobile = window.innerWidth <= 768; const prevBtn = document.getElementById('alumniPrevBtn'); const nextBtn = document.getElementById('alumniNextBtn'); const dots = [ document.getElementById('alumniDot1'), document.getElementById('alumniDot2'), document.getElementById('alumniDot3'), document.getElementById('alumniDot4') ]; if (isMobile) { // Hide everything on mobile if (prevBtn) prevBtn.style.display = 'none'; if (nextBtn) nextBtn.style.display = 'none'; dots.forEach(dot => {
if (dot) dot.style.display = ’none‘;
});
return;
}

// Desktop navigation
if (prevBtn) {
prevBtn.style.display = this.currentSlide === 0 ? ’none‘ : ‚flex‘;
prevBtn.style.opacity = this.currentSlide === 0 ? ‚0‘ : ‚1‘;
}
if (nextBtn) {
nextBtn.style.display = this.currentSlide === 3 ? ’none‘ : ‚flex‘;
nextBtn.style.opacity = this.currentSlide === 3 ? ‚0‘ : ‚1‘;
}

// Update dots
dots.forEach((dot, index) => {
if (dot) {
dot.style.display = ‚inline-block‘;
dot.style.backgroundColor = this.currentSlide === index ? ‚var(–primary-green)‘ : ‚#ddd‘;
dot.style.transform = this.currentSlide === index ? ’scale(1.2)‘ : ’scale(1)‘;
}
});
}
};

// =============================================================================
// 6. GLOBAL FUNCTIONS (for HTML onclick handlers)
// =============================================================================
window.slidePartnership = (direction) => PartnershipSlider.slide(direction);
window.goToSlide = (slide) => PartnershipSlider.goToSlide(slide);
window.slideAlumni = (direction) => AlumniSlider.slide(direction);
window.goToAlumniSlide = (slide) => AlumniSlider.goToSlide(slide);

// =============================================================================
// 7. MAIN INITIALIZATION
// =============================================================================
document.addEventListener(‚DOMContentLoaded‘, function() {
// Initialize all modules
SmoothScrolling.init();
FadeInAnimations.init();
StickyCTA.init();

// Initialize sliders only if they exist
if (document.getElementById(‚partnershipSlider‘)) {
PartnershipSlider.init();
}

if (document.getElementById(‚alumniSlider‘)) {
AlumniSlider.init();
}
});

document.addEventListener(„DOMContentLoaded“, function() {
const faqItems = document.querySelectorAll(„.faq-item“);

faqItems.forEach(item => {
const question = item.querySelector(„.faq-question“);
const answer = item.querySelector(„.faq-answer“);
const icon = item.querySelector(„.faq-icon“);

question.addEventListener(„click“, function() {
const isActive = item.classList.contains(‚active‘);

// Alle anderen FAQs schließen
faqItems.forEach(faqItem => {
faqItem.classList.remove(‚active‘);
const faqIcon = faqItem.querySelector(„.faq-icon“);
faqIcon.textContent = „+“;
});

// Wenn noch nicht aktiv, dann öffnen
if (!isActive) {
item.classList.add(‚active‘);
icon.textContent = „ד;
}
});
});
});

// Aktive Navigation basierend auf Scroll-Position
window.addEventListener(’scroll‘, function() {
const sections = document.querySelectorAll(’section[id]‘);
const navItems = document.querySelectorAll(‚.banner-nav-item‘);
const scrollPos = window.scrollY + 150;

sections.forEach((section, index) => {
const sectionTop = section.offsetTop;
const sectionBottom = sectionTop + section.offsetHeight;

if (scrollPos >= sectionTop && scrollPos < sectionBottom) { navItems.forEach(item => item.classList.remove(‚active‘));
const correspondingNav = document.querySelector(`a[href=“#${section.id}“]`);
if (correspondingNav) {
correspondingNav.classList.add(‚active‘);
}
}
});
});

// Smooth Scroll für Navigation mit besserer Animation
document.querySelectorAll(‚.banner-nav-item‘).forEach(anchor => {
anchor.addEventListener(‚click‘, function (e) {
const href = this.getAttribute(‚href‘);

// Nur interne Links (die mit # beginnen) behandeln
if (href.startsWith(‚#‘)) {
e.preventDefault();
const targetId = href.substring(1);
const targetSection = document.getElementById(targetId);

if (targetSection) {
const offsetTop = targetSection.offsetTop – 120;
// Smooth Scroll mit easing function
const startPos = window.pageYOffset;
const distance = offsetTop – startPos;
const duration = Math.min(800, Math.abs(distance) * 0.5); // Max 800ms
let startTime = null;

function easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1; } function animateScroll(currentTime) { if (startTime === null) startTime = currentTime; const timeElapsed = currentTime - startTime; const progress = Math.min(timeElapsed / duration, 1); const ease = easeInOutCubic(progress); window.scrollTo(0, startPos + distance * ease); if (progress < 1) { requestAnimationFrame(animateScroll); } } requestAnimationFrame(animateScroll); } } // Externe Links (wie https://...) werden NICHT blockiert und funktionieren normal }); });