The Deadlock Wiki

User:Toad64/Homepage: Difference between revisions

Browse history interactively
← Older edit

Toad64 (talk | contribs)

1 user group
480 edits
undo
VisualWikitext
Toad64 (talk | contribs)
Contributors
480 edits
replaced old .js code display with new .js
Toad64 (talk | contribs)
Contributors
480 edits
m Toad64 moved page User:Toad64/Sandbox to User:Toad64/Homepage: making the idea a seperate page outside of my sandbox testing
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
<h3>Javascript code for herocards</h3>
<h3>Herocard design idea</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">
<syntaxhighlight lang="javascript">
document.querySelectorAll('.HeroCard').forEach(function(el) {
document.querySelectorAll('.HeroCard').forEach(function(el) {
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">
.HeroCard .CardBacker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
 
    background-image: url("/images/1/1c/Card_backer.png");
    background-size: 100% 100%;
    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;
}
 
.HeroCard .HeroImage,
.HeroCard .HeroName {
    position: relative;
    z-index: 2;
}
</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}}
{{Deadlock Wiki/Heroes}}
Retrieved from "https://deadlock.wiki/User:Toad64/Homepage"