diff options
Diffstat (limited to 'src/js')
| -rw-r--r-- | src/js/mouseblob.js | 35 |
1 files changed, 21 insertions, 14 deletions
diff --git a/src/js/mouseblob.js b/src/js/mouseblob.js index 4b30a80a..019a2ffa 100644 --- a/src/js/mouseblob.js +++ b/src/js/mouseblob.js @@ -9,13 +9,6 @@ // }, { duration: 1000, fill: "forwards" }); // } -// window.onpointermove = event => { -// const { pageX, pageY } = event; -// blob.animate({ -// left: `${pageX}px`, -// top: `${pageY}px` -// }, { duration: 1000, fill: "forwards" }); -// } // window.onpointermove = event => { // var x = event.pageX; @@ -26,20 +19,34 @@ // blob.style.top = y + 'px'; // } +// window.onpointermove = event => { +// const { pageX, pageY } = event; +// blob.animate({ +// left: `${pageX}px`, +// top: `${pageY}px` +// }, { duration: 1000, fill: "forwards" }); +// } window.onpointermove = event => { // The event object gives us the x and y coordinates of the mouse pointer - var x = event.pageX; - var y = event.pageY; + const { pageX, pageY } = event; + + const momentumX = pageX + pageX - blob.offsetLeft; + const momentumY = pageY + pageY - blob.offsetTop; + + blob.animate({ + left: `${momentumX}px`, + top: `${momentumY}px` + }, { duration: 1500, fill: "forwards" }); blob.animate({ - left: `${x}px`, - top: `${y}px` + left: `${pageX}px`, + top: `${pageY}px` }, { duration: 1000, fill: "forwards" }); - + // We can then use these coordinates to position the blob - blob.style.left = x + 'px'; - blob.style.top = y + 'px'; + blob.style.left = `${pageX}px`; + blob.style.top = `${pageY}px`; } // window.onpointermove = event => { |