data-flag
там в коде. data-value
максимально неинформативен в данном случае. const gradient = context.createRadialGradient(
rotationX * radius * 3, rotationY * radius * 3, radius,
rotationX * radius * 3, rotationY * radius * 3, radius * 4.5
);
document.addEventListener('DOMContentLoaded', () => {
const eye1 = document.querySelector('.y-1');
const eye2 = document.querySelector('.y-3');
const radian = 180 / Math.PI;
document.addEventListener('mousemove', (event) => {
const coordEye1 = eye1.getBoundingClientRect();
const centerEye1 = {
x: coordEye1.left + coordEye1.width / 2,
y: coordEye1.top + coordEye1.height / 2
};
const angleEye1 = Math.atan2(event.clientY - centerEye1.y, event.clientX - centerEye1.x);
const coordEye2 = eye2.getBoundingClientRect();
const centerEye2 = {
x: coordEye2.left + coordEye2.width / 2,
y: coordEye2.top + coordEye2.height / 2
};
const angleEye2 = Math.atan2(event.clientY - centerEye2.y, event.clientX - centerEye2.x);
eye1.style.setProperty('transform', `rotate(${radian * angleEye1}deg)`);
eye2.style.setProperty('transform', `rotate(${radian * angleEye2}deg)`);
});
});
const relativeFollowCursor = (selector, callback) => {
const element = document.querySelector(selector);
const degreeInRadian = 180 / Math.PI;
document.addEventListener('mousemove', (event) => {
const rect = element.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const angle = Math.atan2(event.clientY - centerY, event.clientX - centerX);
callback(element, {
radian: angle,
degree: degreeInRadian * angle
});
});
};
document.addEventListener('DOMContentLoaded', () => {
relativeFollowCursor('.y-1', (eye, { degree }) => eye.style.setProperty('transform', `rotate(${degree}deg)`));
relativeFollowCursor('.y-3', (eye, { degree }) => eye.style.setProperty('transform', `rotate(${degree}deg)`));
});
createCircleBar
.draw
.
Почитайте.