126 lines
4.1 KiB
JavaScript
126 lines
4.1 KiB
JavaScript
/**
|
|
* Tino Andri - SelbstHeilungsTechnik & QuantenHeilung
|
|
* JavaScript functionality
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mobile navigation toggle
|
|
const navToggle = document.querySelector('.nav-toggle');
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
|
|
if (navToggle && navMenu) {
|
|
navToggle.addEventListener('click', function() {
|
|
navToggle.classList.toggle('active');
|
|
navMenu.classList.toggle('active');
|
|
});
|
|
|
|
// Close menu when clicking a link
|
|
navMenu.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
navToggle.classList.remove('active');
|
|
navMenu.classList.remove('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
const headerOffset = 80;
|
|
const elementPosition = target.getBoundingClientRect().top;
|
|
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
|
|
|
window.scrollTo({
|
|
top: offsetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Reveal elements on scroll
|
|
const revealElements = document.querySelectorAll('.section');
|
|
|
|
const revealOnScroll = () => {
|
|
const windowHeight = window.innerHeight;
|
|
|
|
revealElements.forEach(element => {
|
|
const elementTop = element.getBoundingClientRect().top;
|
|
const revealPoint = 150;
|
|
|
|
if (elementTop < windowHeight - revealPoint) {
|
|
element.classList.add('visible');
|
|
}
|
|
});
|
|
};
|
|
|
|
// Initial class setup
|
|
revealElements.forEach(element => {
|
|
element.classList.add('reveal');
|
|
});
|
|
|
|
// Run on load and scroll
|
|
revealOnScroll();
|
|
window.addEventListener('scroll', revealOnScroll, { passive: true });
|
|
|
|
// Navigation background change on scroll
|
|
const nav = document.querySelector('.nav');
|
|
|
|
const updateNavOnScroll = () => {
|
|
if (window.scrollY > 50) {
|
|
nav.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
|
|
} else {
|
|
nav.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.06)';
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', updateNavOnScroll, { passive: true });
|
|
|
|
// Form submission (placeholder - replace with actual form handling)
|
|
const contactForm = document.querySelector('.contact-form');
|
|
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Get form data
|
|
const formData = new FormData(this);
|
|
const data = Object.fromEntries(formData);
|
|
|
|
// Here you would typically send the data to a server
|
|
console.log('Form submitted:', data);
|
|
|
|
// Show success message (replace with actual implementation)
|
|
alert('Vielen Dank für Ihre Nachricht! Ich werde mich bald bei Ihnen melden.');
|
|
this.reset();
|
|
});
|
|
}
|
|
|
|
// Active navigation link highlighting
|
|
const sections = document.querySelectorAll('section[id]');
|
|
|
|
const highlightNav = () => {
|
|
const scrollY = window.pageYOffset;
|
|
|
|
sections.forEach(section => {
|
|
const sectionHeight = section.offsetHeight;
|
|
const sectionTop = section.offsetTop - 100;
|
|
const sectionId = section.getAttribute('id');
|
|
const navLink = document.querySelector(`.nav-menu a[href="#${sectionId}"]`);
|
|
|
|
if (navLink) {
|
|
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
|
|
navLink.style.color = 'var(--color-primary)';
|
|
} else {
|
|
navLink.style.color = '';
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
window.addEventListener('scroll', highlightNav, { passive: true });
|
|
});
|