The Deadlock Wiki

User:Toad64/Homepage: Difference between revisions

Browse history interactively

Toad64 (talk | contribs)

1 user group
480 edits
undo
VisualWikitext
Toad64 (talk | contribs)
Contributors
480 edits
js code idea
 
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
 
(5 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 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>
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>
</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>
<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"