A Pen by Nahom Ebssa

Thumbnail
This awesome code was written by enahom99, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright enahom99 ©
  • HTML
  • CSS
  • JavaScript
    <div class="box"></div>
<!-- <div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div> -->

/*Downloaded from https://www.codeseek.co/enahom99/a-pen-by-nahom-ebssa-PaPNPM */
    .box {
  position: relative;
  height: 120px;
  width: 120px;
  background: pink;
}


/*Downloaded from https://www.codeseek.co/enahom99/a-pen-by-nahom-ebssa-PaPNPM */
    const box = document.querySelectorAll('.box');
box.forEach(box=>box.addEventListener('mousedown', boxMouseDownHandler));
box.forEach(box=>box.addEventListener('mouseup', boxMouseUpHandler));



function followMouse(box) {
  setTimeout(function () {
    box.style.top = (e.clientY - (120 / 2)) + 'px';
    box.style.left = (e.clientX - (120 / 2)) + 'px';
  }, 50);
}

function boxMouseDownHandler(e) {
  const box = e.target;
  function windowMouseMoveHandler() {
    followMouse(box)
  }
  window.addEventListener('mousemove', followMouse);
}
function boxMouseUpHandler(e) {
  window.removeEventListener('mousemove', boxMouseDownHandler);
}

// window.addEventListener('mousemove', (e) => { console.log(e.clientY) });
// window.addEventListener('mousemove', (e) => {
//   
// });

Comments