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
link fix
Toad64 (talk | contribs)
Contributors
480 edits
replaced old .js code display with new .js
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>
</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>
<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>
{{Deadlock Wiki/Heroes}}
{{Deadlock Wiki/Heroes}}
Retrieved from "https://deadlock.wiki/User:Toad64/Homepage"