Erstelle modernen Onepager für Versicherungsfachmann Andreas Guttenberger
- Responsive HTML/CSS Onepager ohne Framework - Hero-Section mit Portrait und AXA-Logo - Service-Karten und Kontaktbereich - Vollständige Favicon-Suite für alle Geräte - Web App Manifest für PWA-Support
This commit is contained in:
40
script.js
Normal file
40
script.js
Normal file
@@ -0,0 +1,40 @@
|
||||
// Smooth scrolling 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) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add animation on scroll
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe service cards and about items
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const animatedElements = document.querySelectorAll('.service-card, .about-item');
|
||||
|
||||
animatedElements.forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user