38 lines
1.4 KiB
JavaScript
38 lines
1.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Intersection Observer for fade-in animations
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.15 });
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
|
|
|
// Logo 3D effect on mousemove
|
|
const logo = document.querySelector('.logo');
|
|
const hero = document.querySelector('.hero');
|
|
|
|
if(window.matchMedia("(pointer: fine)").matches) {
|
|
hero.addEventListener('mousemove', (e) => {
|
|
const rect = hero.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
|
|
// Calculate rotation (inverted for natural feel)
|
|
const rotateX = ((y - centerY) / centerY) * -15;
|
|
const rotateY = ((x - centerX) / centerX) * 15;
|
|
|
|
logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
|
});
|
|
|
|
hero.addEventListener('mouseleave', () => {
|
|
logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`;
|
|
});
|
|
}
|
|
});
|