Fix alignment, restore sticky menu, and fix 3D logo effect
This commit is contained in:
18
script.js
18
script.js
@@ -11,17 +11,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||||
|
||||
// Logo 3D effect on mousemove
|
||||
const logo = document.querySelector('.logo');
|
||||
const hero = document.querySelector('.hero');
|
||||
const logo = document.querySelector('.logo-small');
|
||||
|
||||
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;
|
||||
if(logo && window.matchMedia("(pointer: fine)").matches) {
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const x = e.clientX;
|
||||
const y = e.clientY;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
const centerX = window.innerWidth / 2;
|
||||
const centerY = window.innerHeight / 2;
|
||||
|
||||
// Calculate rotation (inverted for natural feel)
|
||||
const rotateX = ((y - centerY) / centerY) * -15;
|
||||
@@ -30,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
||||
});
|
||||
|
||||
hero.addEventListener('mouseleave', () => {
|
||||
document.addEventListener('mouseleave', () => {
|
||||
logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`;
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user