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 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>
</syntaxhighlight>


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"