Hero Card interaction with mouse
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);
});
});
You can see this code in action by clicking Here (desktop required).
Using a similar code, this also works with the hero image card found on that Hero's wiki page:
add new java script block here, if needed
|
|---|
|
|---|
|
|
|---|
|
|---|
|
|---|
| Information |
|---|
| Release Date: | February 9 2026 | | Internal namesCodenames used for this hero in the game files: | Unicorn, Pepper |
|
|---|
