From d2ecf019b33e607e5f85d10bb2be0b1bcf3daa14 Mon Sep 17 00:00:00 2001 From: Anthony Wang Date: Mon, 29 Jan 2024 02:56:06 -0500 Subject: EXPANDING CIRCLES YAY --- script.js | 18 ++++++++++++++---- style.css | 9 +++++++++ 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 00140c1..188dbe3 100644 --- a/script.js +++ b/script.js @@ -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 diff --git a/style.css b/style.css index fe2652d..9a92d18 100644 --- a/style.css +++ b/style.css @@ -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; +} -- cgit v1.2.3-70-g09d2