User:Toad64/Homepage - Revision history

Toad64: Toad64 moved page User:Toad64/Sandbox to User:Toad64/Homepage: making the idea a seperate page outside of my sandbox testing

2026-05-27T01:34:30Z

Toad64 moved page User:Toad64/Sandbox to User:Toad64/Homepage: making the idea a seperate page outside of my sandbox testing

← Older revision		Revision as of 01:34, 27 May 2026
(No difference)

Toad64: updated css code on page

2026-05-27T00:16:55Z

updated css code on page

← Older revision		Revision as of 00:16, 27 May 2026
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">		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 {		.HeroCard .CardBacker {
	position: absolute;		position: absolute;
	~~inset~~: 0;		top: 0;
			left: 0;
			right: 0;
			bottom: 0;
	pointer-events: none;		pointer-events: none;
	~~mask~~-~~size~~: ~~100% 100%~~;		z-index: 1;
	~~mask~~-image: url(/images/1/1c/Card_backer.png);
	-~~webkit-mask-image~~: ~~url(/images/1/1c/Card_backer.png)~~;		background-image: url("/images/1/1c/Card_backer.png");
	background-~~color~~: ~~transparent~~;		background-size: 100% 100%;
	transition: ~~background-color~~ 0.2s ease;		background-repeat: no-repeat;

			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;
	}		}

	~~/* Only triggers the color change when the card is hovered */~~		.HeroCard .HeroImage,
	~~.mw-parser-output~~ .HeroCard~~:hover~~ .~~CardBacker~~ {		.HeroCard .HeroName {
	~~background~~-~~color~~: ~~#42CFB9~~;		position: relative;
			z-index: 2;
	}		}
	</syntaxhighlight>		</syntaxhighlight>

Toad64: added css code to herocards :D

2026-05-26T22:29:34Z

added css code to herocards :D

← Older revision		Revision as of 22:29, 26 May 2026
Line 1:		Line 1:
	<h3>~~Hero Card interaction with mouse~~</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>

	<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>~~		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">
	~~{{Deadlock Wiki/Heroes}~~}		.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;
			}

	~~Using a similar code, this also works with~~ the ~~hero image~~ card ~~found on that Hero's wiki page~~:		/* Only triggers the color change when the card is hovered */
	~~<syntaxhighlight lang="javascript">~~		.mw-parser-output .HeroCard:hover .CardBacker {
	~~add new java script block here, if needed~~		background-color: #42CFB9;
			}
	</syntaxhighlight>		</syntaxhighlight>
	~~{{Infobox hero~~
	~~\| key~~ = ~~hero_unicorn~~		<templatestyles src="User:Toad64/styles.css"/>
	~~\| voice_actor~~ = ~~<!--Natalie Lander~~ (~~SPECULATION~~) -->		<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>
	~~\| release_date = February 9 2026~~		{{Deadlock Wiki/Heroes}}
	~~\| codenames = Unicorn, Pepper~~
	}}

Toad64: can this be code work on the hero page cards too? time to test

2026-05-26T20:36:33Z

can this be code work on the hero page cards too? time to test

@@ Line 1: / Line 1: @@
-<h3>Javascript code for herocards</h3>
+<h3>Hero Card interaction with mouse</h3>
-<p>Below here is the javascript code that is used for the HeroCards seen on the homepage:</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">
 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>
 {{Deadlock Wiki/Heroes}}

Toad64: replaced old .js code display with new .js

2026-05-26T16:44:27Z

replaced old .js code display with new .js

← Older revision		Revision as of 16:44, 26 May 2026
Line 12:		Line 12:
	var mouseX = 0, mouseY = 0;		var mouseX = 0, mouseY = 0;
	var isOver = false;		var isOver = false;
			var rect = {};
	~~document.addEventListener('mousemove',~~ function(e) {
	mouseX = e.clientX;		var updateMouse = function(e){
			mouseX = e.clientX;
	mouseY = e.clientY;		mouseY = e.clientY;
	});		}

	var tick = function() {		var tick = function() {
	var rect ~~= el~~.~~getBoundingClientRect()~~;		var cx = rect.left + rect.width / 2;
	~~isOver = (~~		var cy = rect.top + rect.height / 2;
	~~mouseX >~~= rect.~~left &&~~		var dx = (mouseX - cx) / (rect.width / 2);
	~~mouseX <=~~ rect.~~right &&~~		var dy = (mouseY - cy) / (rect.height / 2);
	~~mouseY >~~= rect.~~top &&~~
	mouseY <= rect.~~bottom~~
	);

	~~if (isOver) {~~		target.x = dy * -12;
	~~var cx = rect.left + rect.width / 2;~~		target.y = dx * 12;
	~~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;
	~~} else {~~
	~~target.x = 0;~~
	~~target.y = 0;~~
	}

	current.x += (target.x - current.x) * 0.12;		current.x += (target.x - current.x) * 0.12;
Line 44:		Line 33:
	el.style.transform = 'perspective(400px) rotateX(' + current.x + 'deg) rotateY(' + current.y + 'deg) scale(' + (isOver ? 1.05 : 1) + ')';		el.style.transform = 'perspective(400px) rotateX(' + current.x + 'deg) rotateY(' + current.y + 'deg) scale(' + (isOver ? 1.05 : 1) + ')';

	requestAnimationFrame(tick);		animFrame = requestAnimationFrame(tick);
	};		};

			el.addEventListener('mouseenter', function() {
			rect = el.getBoundingClientRect(); // Measure ONCE
			document.addEventListener('mousemove', updateMouse);
			animFrame = requestAnimationFrame(tick); // Ignition
			});

	~~tick~~();		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>		</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>		<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}}

Toad64: link fix

2026-05-26T15:33:18Z

link fix

← Older revision		Revision as of 15:33, 26 May 2026
Line 51:		Line 51:
	</syntaxhighlight>		</syntaxhighlight>

	<p> You can see this code in action by clicking [https://deadlock.~~wiki/~~wiki/User:Toad64/Sandbox?withJS=User:Toad64/common.js Here].</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}}

Toad64: js code idea

2026-05-26T15:30:14Z

js code idea

New page

<h3>Javascript code for herocards</h3>
<p>Below here is the javascript code that is used for the HeroCards seen on the homepage:</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;

document.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
});

var tick = function() {
var rect = el.getBoundingClientRect();
isOver = (
mouseX >= rect.left &&
mouseX <= rect.right &&
mouseY >= rect.top &&
mouseY <= rect.bottom
);

if (isOver) {
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;
} else {
target.x = 0;
target.y = 0;
}

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) + ')';

requestAnimationFrame(tick);
};

tick();
});
</syntaxhighlight>

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