The Deadlock Wiki

User:Monster Domosed/common.js: Difference between revisions

Browse history interactively
← Older editNewer edit →

Monster Domosed (talk | contribs)

2 user groups
4,611 edits
blanked
Tags: Blanking Manual revert
testing
Line 1: Line 1:
document.querySelectorAll('.HeroCard2').forEach(el => {
  el.style.transition = 'none';
  el.style.transformStyle = 'preserve-3d';
  el.style.willChange = 'transform';


  let animFrame;
  let current = { x: 0, y: 0 };
  el.addEventListener('mousemove', (e) => {
    const rect = el.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    const dx = (e.clientX - cx) / (rect.width / 2);
    const dy = (e.clientY - cy) / (rect.height / 2);
    const targetX = dy * -12;
    const targetY = dx * 12;
    cancelAnimationFrame(animFrame);
    const animate = () => {
      current.x += (targetX - current.x) * 0.12;
      current.y += (targetY - current.y) * 0.12;
      el.style.transform = `perspective(400px) rotateX(${current.x}deg) rotateY(${current.y}deg) scale(1.05)`;
      if (Math.abs(targetX - current.x) > 0.05 || Math.abs(targetY - current.y) > 0.05) {
        animFrame = requestAnimationFrame(animate);
      }
    };
    animate();
  });
  el.addEventListener('mouseleave', (e) => {
  if (el.contains(e.relatedTarget)) return; // still inside card, ignore
  cancelAnimationFrame(animFrame);
  const reset = () => {
    current.x *= 0.85;
    current.y *= 0.85;
    el.style.transform = `perspective(400px) rotateX(${current.x}deg) rotateY(${current.y}deg) scale(1)`;
    if (Math.abs(current.x) > 0.05 || Math.abs(current.y) > 0.05) {
      animFrame = requestAnimationFrame(reset);
    } else {
      el.style.transform = '';
    }
  };
  reset();
});
});
Retrieved from "https://deadlock.wiki/User:Monster_Domosed/common.js"