84 lines
2.7 KiB
JavaScript
84 lines
2.7 KiB
JavaScript
// Magic Civilization: Age of Dwarves - Landing Site
|
|
// Minimal interactive enhancements
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Smooth scroll behavior for internal links (fallback for older browsers)
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
const href = this.getAttribute('href');
|
|
if (href !== '#') {
|
|
e.preventDefault();
|
|
const target = document.querySelector(href);
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Lazy-load intersection observer for subtle fade-in 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.animation = 'fadeInUp 0.6s ease forwards';
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all major content blocks
|
|
document.querySelectorAll('.layer, .clan-card, .age-card').forEach(el => {
|
|
el.style.opacity = '0';
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Add animation keyframes if not present
|
|
if (!document.getElementById('anim-styles')) {
|
|
const style = document.createElement('style');
|
|
style.id = 'anim-styles';
|
|
style.textContent = `
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// Simple analytics event tracking (stub for future integration)
|
|
window.trackEvent = function(eventName, eventData) {
|
|
console.log('Event:', eventName, eventData);
|
|
// Replace with actual analytics call when ready
|
|
};
|
|
|
|
// Track button clicks
|
|
document.querySelectorAll('a.btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const label = this.textContent.trim();
|
|
window.trackEvent('cta_click', { label: label });
|
|
});
|
|
});
|
|
|
|
// Track platform badge clicks
|
|
document.querySelectorAll('.platform-badge').forEach(badge => {
|
|
badge.addEventListener('click', function() {
|
|
const platform = this.textContent.trim();
|
|
window.trackEvent('platform_click', { platform: platform });
|
|
});
|
|
});
|
|
|
|
console.log('Age of Dwarves landing site initialized.');
|
|
})();
|