User:Toad64/Homepage: Difference between revisionsGive feedback

Revision as of 16:44, 26 May 2026

Javascript code for herocards

Below here is the javascript code that is used for the HeroCards seen on the homepage:

document.querySelectorAll('.HeroCard').forEach(function(el) {
  el.style.transition = 'none';
  el.style.transformStyle = 'preserve-3d';
  el.style.willChange = 'transform';

  var animFrame;
  var current = { x: 0, y: 0 };
  var target = { x: 0, y: 0 };
  var mouseX = 0, mouseY = 0;
  var isOver = false;
  var rect = {};
  
  var updateMouse = function(e){
  	mouseX = e.clientX;
    mouseY = e.clientY;
  }

  var tick = function() {
    var cx = rect.left + rect.width / 2;
    var cy = rect.top + rect.height / 2;
    var dx = (mouseX - cx) / (rect.width / 2);
    var dy = (mouseY - cy) / (rect.height / 2);

    target.x = dy * -12;
    target.y = dx * 12;

    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) + ')';

    animFrame = requestAnimationFrame(tick);
  };
  
  el.addEventListener('mouseenter', function() {
    rect = el.getBoundingClientRect(); // Measure ONCE
    document.addEventListener('mousemove', updateMouse);
    animFrame = requestAnimationFrame(tick); // Ignition
  });

  el.addEventListener('mouseleave', function() {
    document.removeEventListener('mousemove', updateMouse);
    cancelAnimationFrame(animFrame); // Kill the engine
    
    el.style.transition = 'transform 0.5s ease-out'; 
    el.style.transform = 'perspective(400px) rotateX(0deg) rotateY(0deg) scale(1)';
    
    setTimeout(function() { el.style.transition = 'none'; }, 500);
  });
});