Editing User:Toad64/HomepageGive feedback

<h3>Hero Card interaction with mouse</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>

<p> You can see this code in action by clicking [https://deadlock.wiki/User:Toad64/Sandbox?withJS=User:Toad64/common.js Here] (desktop required).</p>
{{Deadlock Wiki/Heroes}}

Using a similar code, this also works with the hero image card found on that Hero's wiki page:
<syntaxhighlight lang="javascript">
add new java script block here, if needed
</syntaxhighlight>
{{Infobox hero
| key = hero_unicorn
| voice_actor = <!--Natalie Lander (SPECULATION) -->
| release_date = February 9 2026
| codenames = Unicorn, Pepper
}}
@@ Line 1: / Line 1: @@
-<h3>Herocard design idea</h3>
+<h3>Hero Card interaction with mouse</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">
@@ Line 55: / Line 55: @@
 </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">
+<p> You can see this code in action by clicking [https://deadlock.wiki/User:Toad64/Sandbox?withJS=User:Toad64/common.js Here] (desktop required).</p>
-.HeroCard .CardBacker {
+{{Deadlock Wiki/Heroes}}
-    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");
+Using a similar code, this also works with the hero image card found on that Hero's wiki page:
-    background-size: 100% 100%;
+<syntaxhighlight lang="javascript">
-    background-repeat: no-repeat;
+add new java script block here, if needed
-    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;
-}
 </syntaxhighlight>
+{{Infobox hero
-<templatestyles src="User:Toad64/styles.css"/>
+| key = hero_unicorn
-<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>
+| voice_actor = <!--Natalie Lander (SPECULATION) -->
-{{Deadlock Wiki/Heroes}}
+| release_date = February 9 2026
+| codenames = Unicorn, Pepper
+}}