Editing User:Toad64/HomepageGive feedback

<h3>Herocard design idea</h3>
<p>This javascript code adds a listener to the <code>.HeroCard</code> 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:</p>
<syntaxhighlight lang="javascript">
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);
  });
});

</syntaxhighlight>

Using some css code, the background of the Hero Card can  its background change when hovered (if not blocked behind the hero image).<syntaxhighlight lang="css">
.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;
}
</syntaxhighlight>

<templatestyles src="User:Toad64/styles.css"/>
<p> You can see the javascript code in action by clicking [https://deadlock.wiki/User:Toad64/Sandbox?withJS=User:Toad64/common.js Here] (desktop required).</p>
{{Deadlock Wiki/Heroes}}
@@ Line 56: / Line 56: @@
 Using some css code, the background of the Hero Card can  its background change when hovered (if not blocked behind the hero image).<syntaxhighlight lang="css">
-.HeroCard .CardBacker {
+.mw-parser-output .HeroCard .CardBacker {
      position: absolute;
-     top: 0;
+     inset: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
      pointer-events: none;
-     z-index: 1;
+     mask-size: 100% 100%;
+     mask-image: url(/images/1/1c/Card_backer.png);
-     background-image: url("/images/1/1c/Card_backer.png");
+     -webkit-mask-image: url(/images/1/1c/Card_backer.png);
-     background-size: 100% 100%;
+     background-color: transparent;
-     background-repeat: no-repeat;
+     transition: background-color 0.2s ease;
-    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,
+/* Only triggers the color change when the card is hovered */
-.HeroCard .HeroName {
+.mw-parser-output .HeroCard:hover .CardBacker {
-     position: relative;
+     background-color: #42CFB9;
-    z-index: 2;
 }
 </syntaxhighlight>