diff options
| -rw-r--r-- | script.js | 18 | ||||
| -rw-r--r-- | style.css | 9 |
2 files changed, 23 insertions, 4 deletions
@@ -38,12 +38,12 @@ document.querySelectorAll("svg").forEach(function(svg) { a.cm.y += p.y a.p.push(p) // Show circles for debugging - let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); + /* let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); circle.setAttribute("cx", p.x); circle.setAttribute("cy", p.y); circle.setAttribute("r", rad); circle.setAttribute("fill", "red"); - svg.appendChild(circle) + svg.appendChild(circle) */ } }) a.cm.x /= a.p.length @@ -201,8 +201,18 @@ function updatev(event) { a.vy += 100 * (a.y - event.clientY) / d } - // TODO: Display spreading out circles - + // Display spreading out circles + let circle = document.createElement("div") + circle.style.width = circle.style.height = "10px" + circle.style.left = event.clientX - 5 + "px" + circle.style.top = event.clientY - 5 + "px" + document.body.appendChild(circle) + circle.offsetWidth + circle.style.transform = "scale(500)" + circle.style.opacity = "0" + setTimeout(function () { + document.body.removeChild(circle); + }, 1000); } cnt = 0 @@ -4,6 +4,8 @@ body { background-position: center; background-repeat: no-repeat; background-attachment: fixed; + overflow-y: hidden; + overflow-x: hidden; touch-action: manipulation; } @@ -43,3 +45,10 @@ svg { animation: color 10s infinite linear; position: absolute; } + +div { + position: absolute; + border-radius: 50%; + background-color: #007bff; + transition: transform 1000ms ease-in-out, opacity 1000ms ease-in-out; +} |