Spaces:
Running
Running
File size: 3,713 Bytes
fae09d4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | // Initialize GSAP and ScrollTrigger
gsap.registerPlugin(ScrollTrigger);
// Loading Animation
window.addEventListener('load', function() {
setTimeout(function() {
document.getElementById('loading').classList.add('hidden');
}, 1500);
});
// Parallax Effect
document.addEventListener('DOMContentLoaded', function() {
const parallaxLayers = document.querySelectorAll('.parallax-layer');
window.addEventListener('scroll', function() {
const scrollPosition = window.pageYOffset;
parallaxLayers.forEach(layer => {
const depth = layer.getAttribute('data-depth') || 0;
const translateY = -(scrollPosition * depth);
layer.style.transform = `translateY(${translateY}px)`;
});
});
});
// Driver Slider
const driverTrack = document.querySelector('.driver-track');
const driverSlides = document.querySelectorAll('.driver-slide');
const prevBtn = document.querySelector('.driver-prev');
const nextBtn = document.querySelector('.driver-next');
let currentIndex = 0;
const slideCount = driverSlides.length;
function updateSlider() {
const slideWidth = driverSlides[0].offsetWidth;
driverTrack.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % slideCount;
updateSlider();
});
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + slideCount) % slideCount;
updateSlider();
});
// Race Timeline Animations
gsap.utils.toArray('.race-item').forEach((item, i) => {
gsap.fromTo(item,
{ opacity: 0, y: 20 },
{
opacity: 1,
y: 0,
scrollTrigger: {
trigger: item,
start: "top 85%",
toggleActions: "play none none reverse"
},
duration: 0.6,
delay: i * 0.1
}
);
});
// Standings Table Animation
gsap.from('.standings-table tbody tr', {
opacity: 0,
y: 15,
stagger: 0.1,
duration: 0.5,
scrollTrigger: {
trigger: '.standings-table',
start: "top 80%"
}
});
// Count-up Animation
const countUpElements = document.querySelectorAll('[data-countup]');
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.5
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const element = entry.target;
const endValue = parseInt(element.getAttribute('data-countup'));
let startValue = 0;
const duration = 2000; // ms
const increment = endValue / (duration / 16); // 16ms per frame
const counter = setInterval(() => {
startValue += increment;
if (startValue >= endValue) {
startValue = endValue;
clearInterval(counter);
}
element.textContent = Math.floor(startValue);
}, 16);
observer.unobserve(element);
}
});
}, observerOptions);
countUpElements.forEach(el => {
observer.observe(el);
});
// Sound Toggle
const soundToggle = document.getElementById('soundToggle');
const soundIcon = soundToggle.querySelector('i');
soundToggle.addEventListener('click', () => {
// In a real implementation, this would toggle actual sound
if (soundIcon.getAttribute('data-feather') === 'volume-2') {
soundIcon.setAttribute('data-feather', 'volume-x');
} else {
soundIcon.setAttribute('data-feather', 'volume-2');
}
feather.replace();
}); |