User:Toad64/Homepage: Difference between revisionsGive feedback

Latest revision as of 01:34, 27 May 2026

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).

.HeroCard .CardBacker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;

    background-image: url("/images/1/1c/Card_backer.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    opacity: 0;
    transition: opacity 0.2s ease, filter 0.2s ease;
    
    filter: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(620%) hue-rotate(114deg) brightness(91%) contrast(89%);
}

.HeroCard:hover .CardBacker {
    opacity: 1;
}

.HeroCard .HeroImage, 
.HeroCard .HeroName {
    position: relative;
    z-index: 2;
}