User:Toad64/HomepageGive feedback

Herocard design idea

This javascript code adds a listener to the .HeroCard element to allow the card the mouse is currently hovered over to tilt based on the mouse's location, relative to the center of the card:

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);
  });
});

Using some css code, the background of the Hero Card can its background change when hovered (if not blocked behind the hero image).

.mw-parser-output .HeroCard .CardBacker {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mask-size: 100% 100%;
    mask-image: url(/images/1/1c/Card_backer.png);
    -webkit-mask-image: url(/images/1/1c/Card_backer.png);
    background-color: transparent;
    transition: background-color 0.2s ease;
}

/* Only triggers the color change when the card is hovered */
.mw-parser-output .HeroCard:hover .CardBacker {
    background-color: #42CFB9;
}