User:Toad64/Homepage: Difference between revisionsGive feedback
replaced old .js code display with new .js |
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> | <h3>Herocard design idea</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 55: | Line 55: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<p> You can see | 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}} | ||