Editing User:Toad64/Homepage

Jump to navigation Jump to search
Warning: You are not logged in. Once you make an edit, a temporary account will be created for you. Learn more. Log in or create an account to continue receiving notifications after this account expires, and to access other features.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
<h3>Herocard design idea</h3>
<h3>Javascript code for herocards</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>Below here is the javascript code that is used for the HeroCards seen on the homepage:</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) {
  var updateMouse = function(e){
    mouseX = e.clientX;
  mouseX = e.clientX;
     mouseY = e.clientY;
     mouseY = e.clientY;
   }
   });


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


     target.x = dy * -12;
     if (isOver) {
    target.y = dx * 12;
      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.x += (target.x - current.x) * 0.12;
Line 33: Line 44:
     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) + ')';


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


   el.addEventListener('mouseleave', function() {
   tick();
    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>


<templatestyles src="User:Toad64/styles.css"/>
<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 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}}
Please note that all contributions to The Deadlock Wiki are considered to be released under the Creative Commons Attribution-NonCommercial-ShareAlike (see Deadlock:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!
Cancel Editing help (opens in new window)

Pages included on this page:

Retrieved from "https://deadlock.wiki/User:Toad64/Homepage"