User:Toad64/HomepageGive feedback

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;

  document.addEventListener('mousemove', function(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

  var tick = function() {
    var rect = el.getBoundingClientRect();
    isOver = (
      mouseX >= rect.left &&
      mouseX <= rect.right &&
      mouseY >= rect.top &&
      mouseY <= rect.bottom
    );

    if (isOver) {
      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;
    } else {
      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);
  };

  tick();
});