36 lines
774 B
JavaScript
36 lines
774 B
JavaScript
|
|
const pointer = { x: 0, y: 0 };
|
|
|
|
window.addEventListener(
|
|
"pointermove",
|
|
(e) => {
|
|
pointer.x = e.clientX;
|
|
pointer.y = e.clientY;
|
|
},
|
|
false
|
|
);
|
|
|
|
const paths = document.getElementsByTagName("path");
|
|
const svg = document.getElementsByTagName("svg")[0];
|
|
|
|
console.log(paths);
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
const rect = svg.getBoundingClientRect();
|
|
const x = pointer.x - rect.left;
|
|
const y = pointer.y - rect.top;
|
|
for( const path of paths ) {
|
|
const i = Number(path.getAttribute("id"));
|
|
const xk = 0.004 * x;
|
|
const yk = 0.004 * (y + i - 200);
|
|
path.setAttribute(
|
|
"transform", `translate(${x}, ${y}) scale(${xk},${yk}) rotate(${xk * i * 2},20,20)`
|
|
);
|
|
}
|
|
}
|
|
|
|
animate();
|
|
|
|
|
|
|