WTF
3 l
28
const eye = document.querySelector('.iris');
window.addEventListener('mousemove', (event) => {
const x = -(window.innerWidth / 2 - event.pageX) / 3;
let y = -(window.innerHeight / 20 - event.pageY) / 4;
// Ograniczenie przesunięcia y do połowy wysokości oka
const eyeHeight = document.querySelector('.eyeBall').offsetHeight;
const halfEyeHeight = eyeHeight / 2;
y = Math.max(Math.min(y, halfEyeHeight), -halfEyeHeight);
eye.style.transform = `rotate(-45deg) translateY(${y}px) translateX(${x}px)`;
});
.back {
overflow: hidden; /* Dodana właściwość overflow: hidden */
}
.container {
position: relative;
}
.iris {
position: relative;
width: 25vh;
height: 25vh;
background-color: #0077b6;
border-radius: 50%;
left: 0px;
top: 0px;
z-index: 1;
}
.eyeBall {
position: relative;
width: 50vh;
height: 50vh;
background-color: white;
border-radius: 100% 0;
transform: rotate(45deg);
top: -10px;
z-index: 9999;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}