User:Toad64/Homepage: Difference between revisionsGive feedback
Jump to navigation
Jump to search
can this be code work on the hero page cards too? time to test |
added css code to herocards :D |
||
| Line 1: | Line 1: | ||
<h3> | <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> | <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"> | ||
| Line 55: | Line 55: | ||
</syntaxhighlight> | </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> | </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}} | |||
}} | |||
Revision as of 22:29, 26 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).
.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;
}
You can see the javascript code in action by clicking Here (desktop required).
Heroes
