From 66588d40e85185dd6a907ff4b33ba3245e03fee9 Mon Sep 17 00:00:00 2001 From: Mitul Sonagara <95460188+MitulSonagara@users.noreply.github.com> Date: Sat, 11 May 2024 11:29:19 +0530 Subject: [PATCH 1/3] Create cursor_transition.css --- assets/css/cursor_transition.css | 36 ++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 assets/css/cursor_transition.css diff --git a/assets/css/cursor_transition.css b/assets/css/cursor_transition.css new file mode 100644 index 0000000000..9161a721a5 --- /dev/null +++ b/assets/css/cursor_transition.css @@ -0,0 +1,36 @@ +.cursor { + z-index: 999; + position: fixed; + background: #23bdf5; + width: 20px; + height: 20px; + border-radius: 50%; + pointer-events: none; + box-shadow: 0 0 20px #23bdf5, + 0 0 60px #23bdf5, + 0 0 100px #23bdf5; + animation: colors 1s infinite; + transform: translate(-50%, -50%); + display: none; +} + +@keyframes colors { + 0% { + filter: hue-rotate(0deg); + } + + 100% { + filter: hue-rotate(360deg); + } +} + +.cursor:before { + content: ''; + position: absolute; + background: #23bdf5; + width: 50px; + height: 50px; + opacity: 0.2; + transform: translate(-30%, -30%); + border-radius: 50%; +} From 0159150b1337cc571056c307300c636ab9d630be Mon Sep 17 00:00:00 2001 From: Mitul Sonagara <95460188+MitulSonagara@users.noreply.github.com> Date: Sat, 11 May 2024 11:30:09 +0530 Subject: [PATCH 2/3] Create cursor_transition.js --- assets/js/cursor_transition.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 assets/js/cursor_transition.js diff --git a/assets/js/cursor_transition.js b/assets/js/cursor_transition.js new file mode 100644 index 0000000000..fd46b812ec --- /dev/null +++ b/assets/js/cursor_transition.js @@ -0,0 +1,28 @@ +document.addEventListener("DOMContentLoaded", function () { + const cursor = document.querySelector(".cursor"); + var timeout; + + document.addEventListener("mousemove", (e) => { + let x = e.clientX; + let y = e.clientY; + + cursor.style.top = y + "px"; + cursor.style.left = x + "px"; + cursor.style.display = "block"; + + function mouseStopped() { + cursor.style.display = "none"; + } + + clearTimeout(timeout); + timeout = setTimeout(mouseStopped, 1000); + }); + + document.addEventListener("scroll", () => { + cursor.style.display = "none"; + }); + + document.addEventListener("mouseout", () => { + cursor.style.display = "none"; + }); + }); From f5447c848f8662acc36caab6c33f1a0be78712ee Mon Sep 17 00:00:00 2001 From: Mitul Sonagara <95460188+MitulSonagara@users.noreply.github.com> Date: Sat, 11 May 2024 11:32:52 +0530 Subject: [PATCH 3/3] Update index.html --- index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 433fb1bb3b..1cb2bdf273 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,7 @@ +
- + @@ -233,6 +234,8 @@