99 lines
2.9 KiB
JavaScript
99 lines
2.9 KiB
JavaScript
// Smooth scrolling for navigation links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId && targetId !== '#') {
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
targetElement.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add animation on scroll
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all feature cards
|
|
document.querySelectorAll('.feature-card, .arch-component').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);
|
|
});
|
|
|
|
// Touch gesture support for mobile navigation
|
|
class TouchNavigation {
|
|
constructor() {
|
|
this.touchStartX = 0;
|
|
this.touchStartY = 0;
|
|
this.touchEndX = 0;
|
|
this.touchEndY = 0;
|
|
this.minSwipeDistance = 50;
|
|
this.maxVerticalDistance = 100;
|
|
|
|
this.initializeTouchEvents();
|
|
}
|
|
|
|
initializeTouchEvents() {
|
|
document.addEventListener('touchstart', (e) => {
|
|
this.touchStartX = e.changedTouches[0].screenX;
|
|
this.touchStartY = e.changedTouches[0].screenY;
|
|
}, { passive: true });
|
|
|
|
document.addEventListener('touchend', (e) => {
|
|
this.touchEndX = e.changedTouches[0].screenX;
|
|
this.touchEndY = e.changedTouches[0].screenY;
|
|
this.handleSwipe();
|
|
}, { passive: true });
|
|
}
|
|
|
|
handleSwipe() {
|
|
const xDiff = this.touchEndX - this.touchStartX;
|
|
const yDiff = Math.abs(this.touchEndY - this.touchStartY);
|
|
|
|
// Ensure swipe is mostly horizontal
|
|
if (yDiff > this.maxVerticalDistance) return;
|
|
|
|
if (Math.abs(xDiff) > this.minSwipeDistance) {
|
|
if (xDiff > 0) {
|
|
// Swipe Right - potentially open menu or go back
|
|
this.onSwipeRight();
|
|
} else {
|
|
// Swipe Left - potentially close menu or go forward
|
|
this.onSwipeLeft();
|
|
}
|
|
}
|
|
}
|
|
|
|
onSwipeRight() {
|
|
// Can be implemented if a side menu is added
|
|
// console.log('Swiped right');
|
|
}
|
|
|
|
onSwipeLeft() {
|
|
// Can be implemented if a side menu is added
|
|
// console.log('Swiped left');
|
|
}
|
|
}
|
|
|
|
// Initialize touch navigation when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
new TouchNavigation();
|
|
});
|