User:Toad64/Homepage: Difference between revisionsGive feedback
Jump to navigation
Jump to search
replaced old .js code display with new .js |
can this be code work on the hero page cards too? time to test |
||
| Line 1: | Line 1: | ||
<h3> | <h3>Hero Card interaction with mouse</h3> | ||
<p> | <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"> | <syntaxhighlight lang="javascript"> | ||
document.querySelectorAll('.HeroCard').forEach(function(el) { | document.querySelectorAll('.HeroCard').forEach(function(el) { | ||
| Line 57: | Line 57: | ||
<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> | <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}} | {{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 | |||
}} | |||
Revision as of 20:36, 26 May 2026
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).
Heroes
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 | |||||||||||||||||||
| |||||||||||||||||||
