1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
// const blob = document.querySelector('.sblob');
// window.onpointermove = event => {
// const { clientX, clientY } = event;
// blob.animate({
// left: `${clientX}px`,
// top: `${clientY}px`
// }, { duration: 1000, fill: "forwards" });
// }
// window.onpointermove = event => {
// var x = event.pageX;
// var y = event.pageY;
// // We can then use these coordinates to position the blob
// blob.style.left = x + 'px';
// 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 => {
const { pageX, pageY } = event;
// Get Initial Momentum
const momentumX = pageX + pageX - blob.offsetLeft;
const momentumY = pageY + pageY - blob.offsetTop;
// Move to momentem offseted position
blob.animate({
left: `${momentumX}px`,
top: `${momentumY}px`
}, { duration: 1500, fill: "forwards" });
// Move/Bounce back to initial mouse after momentum
blob.animate({
left: `${pageX}px`,
top: `${pageY}px`
}, { duration: 1000, fill: "forwards" });
// Set Default Initial position for blob / fix safari as the animate don't presist(it don't care about fill forwards)
blob.style.left = `${pageX}px`;
blob.style.top = `${pageY}px`;
}
// window.onpointermove = event => {
// const { pageX, pageY } = event;
// blob.animate({
// left: `${pageX}px`,
// top: `${pageY}px`
// }, { duration: 1000, fill: "forwards" });
// }
|
