101 lines
3.4 KiB
JavaScript
101 lines
3.4 KiB
JavaScript
// Handle video playback error
|
|
const iframe = document.getElementById('ytplayer');
|
|
iframe.onerror = () => {
|
|
iframe.style.display = 'none';
|
|
document.querySelector('.hero-bg img').style.display = 'block';
|
|
};
|
|
|
|
// Ensure page loads at the top
|
|
window.addEventListener('load', () => {
|
|
window.scrollTo(0, 0);
|
|
});
|
|
|
|
// Scroll animations for sections
|
|
const sections = document.querySelectorAll('.section-bg');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry, index) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.transform = 'translateY(0)';
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transitionDelay = `${index * 0.1}s`;
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
sections.forEach(section => {
|
|
section.style.transform = 'translateY(30px)';
|
|
section.style.opacity = '0';
|
|
section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
|
|
observer.observe(section);
|
|
});
|
|
|
|
// Dynamic particle spawning
|
|
function createParticle() {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
if (Math.random() > 0.6) particle.classList.add('large');
|
|
particle.style.left = `${Math.random() * 100}%`;
|
|
particle.style.top = `${Math.random() * 100}%`;
|
|
particle.style.animationDelay = `${Math.random() * 10}s`;
|
|
particle.style.animationDuration = `${10 + Math.random() * 8}s`;
|
|
document.body.appendChild(particle);
|
|
setTimeout(() => particle.remove(), 18000);
|
|
}
|
|
|
|
setInterval(createParticle, 500);
|
|
|
|
// Throttle function to limit scroll event frequency
|
|
function throttle(fn, wait) {
|
|
let lastTime = 0;
|
|
return function (...args) {
|
|
const now = Date.now();
|
|
if (now - lastTime >= wait) {
|
|
fn.apply(this, args);
|
|
lastTime = now;
|
|
}
|
|
};
|
|
}
|
|
|
|
// Parallax effect for fallback image only
|
|
const hero = document.querySelector('.hero-bg');
|
|
const heroImg = hero.querySelector('img');
|
|
window.addEventListener(
|
|
'scroll',
|
|
throttle(() => {
|
|
const scrollPosition = window.pageYOffset;
|
|
// Apply parallax only to fallback image if iframe is hidden
|
|
if (heroImg.style.display === 'block') {
|
|
heroImg.style.transform = `translate(-50%, calc(-50% + ${scrollPosition * 0.3}px)) scale(1.2)`;
|
|
}
|
|
}, 16) // ~60fps
|
|
);
|
|
|
|
// Tilt effect for feature cards
|
|
const tiltCards = document.querySelectorAll('.tilt-card');
|
|
tiltCards.forEach(card => {
|
|
card.addEventListener('mousemove', (e) => {
|
|
const rect = card.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
const tiltX = (y - centerY) / 12;
|
|
const tiltY = (centerX - x) / 12;
|
|
card.style.transform = `perspective(1200px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
|
|
});
|
|
card.addEventListener('mouseleave', () => {
|
|
card.style.transform = 'perspective(1200px) rotateX(0) rotateY(0)';
|
|
});
|
|
});
|
|
|
|
// Cursor glow effect for buttons
|
|
const buttons = document.querySelectorAll('.btn-minecraft');
|
|
buttons.forEach(button => {
|
|
button.addEventListener('mousemove', (e) => {
|
|
const rect = button.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
button.style.setProperty('--x', `${x}px`);
|
|
button.style.setProperty('--y', `${y}px`);
|
|
});
|
|
}); |