Returns an object with coors that you can use for CSS transition { top, left }

parallax-mouse-moving.js

export const getOffset = (e, offset = 3, isCentered = true) => {
  const pageX = e.pageX
  const pageY = e.pageY
  const scrollTop = window.pageYOffset // To remove a {scrollTop} from the {pageY}
  const winWidth = window.innerWidth
  const winHeight = window.innerHeight
  const centerTop = winHeight / 2
  const centerLeft = winWidth / 2
  const onePercentWidth = centerLeft / offset
  const onePercentHeight = centerTop / offset

  const percentsLeft = offset - pageX / onePercentWidth
  const percentsTop = offset - (pageY - scrollTop) / onePercentHeight

  const top = isCentered ? -50 + Number(percentsTop.toFixed(2)) : Number(percentsTop.toFixed(2))
  const left = isCentered ? -50 + Number(percentsLeft.toFixed(2)) : Number(percentsLeft.toFixed(2))

  return {
    top,
    left
  }
}

// How to use it (with jQuery but it isn't necessary):

$(document.body).on('mousemove', onMouseMove)

function onMouseMove (e) {
    const coords = getOffset(e, 1.5)
    
    $('.block').css({
      transform: `translate(${coords.left}%, ${coords.top}%)`
    })
}