The Deadlock Wiki

User:Toad64/Homepage: Difference between revisions

Browse history interactively
← Older editNewer edit →

Toad64 (talk | contribs)

1 user group
480 edits
undo
VisualWikitext
Toad64 (talk | contribs)
Contributors
480 edits
can this be code work on the hero page cards too? time to test
Toad64 (talk | contribs)
Contributors
480 edits
added css code to herocards :D
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
}}
Retrieved from "https://deadlock.wiki/User:Toad64/Homepage"