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
testing
No edit summary
Line 1: Line 1:
document.querySelectorAll('.HeroCard2').forEach(el => {
document.querySelectorAll('.HeroCard2').forEach(function(el) {
   el.style.transition = 'none';
   el.style.transition = 'none';
   el.style.transformStyle = 'preserve-3d';
   el.style.transformStyle = 'preserve-3d';
   el.style.willChange = 'transform';
   el.style.willChange = 'transform';


   let animFrame;
   var animFrame;
   let current = { x: 0, y: 0 };
   var current = { x: 0, y: 0 };
  var target = { x: 0, y: 0 };
  var mouseX = 0, mouseY = 0;
  var isOver = false;


   el.addEventListener('mousemove', (e) => {
   document.addEventListener('mousemove', function(e) {
     const rect = el.getBoundingClientRect();
     mouseX = e.clientX;
    const cx = rect.left + rect.width / 2;
     mouseY = e.clientY;
    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);
  var tick = function() {
     const animate = () => {
     var rect = el.getBoundingClientRect();
      current.x += (targetX - current.x) * 0.12;
    isOver = (
       current.y += (targetY - current.y) * 0.12;
       mouseX >= rect.left &&
       el.style.transform = `perspective(400px) rotateX(${current.x}deg) rotateY(${current.y}deg) scale(1.05)`;
       mouseX <= rect.right &&
       if (Math.abs(targetX - current.x) > 0.05 || Math.abs(targetY - current.y) > 0.05) {
       mouseY >= rect.top &&
        animFrame = requestAnimationFrame(animate);
      mouseY <= rect.bottom
      }
     );
     };
    animate();
  });


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