From 5dc57b7282bf89200046d0eab594048e8530b678 Mon Sep 17 00:00:00 2001 From: SOUMYADIP GIRI <122915461+Soumyadipgithub@users.noreply.github.com> Date: Sun, 23 Feb 2025 18:47:54 +0530 Subject: [PATCH 01/13] Create Scroll.js --- js/Scroll.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 js/Scroll.js diff --git a/js/Scroll.js b/js/Scroll.js new file mode 100644 index 0000000..c539bb4 --- /dev/null +++ b/js/Scroll.js @@ -0,0 +1,27 @@ + + +const scrollButton = document.getElementById('scrollButton'); +const outerCircle = document.querySelector('.outer-circle'); +const arrow = document.querySelector('.arrow'); + +// Function to handle scroll behavior +window.addEventListener('scroll', () => { + const scrollTop = window.scrollY; + const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; + const scrollProgress = (scrollTop / scrollHeight) * 360; + + // Show button after scrolling 7-8 lines (~100px) + if (scrollTop > 100) { + scrollButton.classList.add('visible'); + } else { + scrollButton.classList.remove('visible'); + } + + // Update the circular progress + outerCircle.style.setProperty('--scroll-progress', `${scrollProgress}deg`); +}); + +// Scroll-to-top functionality +scrollButton.addEventListener('click', () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); +}); From cf114b8e8663590c81aaf17e62f569a3ff128d6a Mon Sep 17 00:00:00 2001 From: SOUMYADIP GIRI <122915461+Soumyadipgithub@users.noreply.github.com> Date: Sun, 23 Feb 2025 18:49:14 +0530 Subject: [PATCH 02/13] Create Scroll.css --- css/Scroll.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 css/Scroll.css diff --git a/css/Scroll.css b/css/Scroll.css new file mode 100644 index 0000000..0ff6943 --- /dev/null +++ b/css/Scroll.css @@ -0,0 +1,58 @@ +/* Scroll */ +#scrollButton { + position: fixed; + bottom: 75px; + right: 15px; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1000; + opacity: 0; /* Initially hidden */ + pointer-events: none; /* Prevent interaction when hidden */ + transition: opacity 0.7s ease; /* Smooth fade-in effect */ +} + + +#scrollButton.visible { + opacity: 1; /* Fully visible */ + pointer-events: auto; /* Enable interaction */ +} + +.outer-circle { + position: relative; + width: 46px; + height: 46px; + border-radius: 50%; + background: conic-gradient( + #ffc534 0deg, + #ff9f02 var(--scroll-progress, 0deg), + #dddddd00 var(--scroll-progress, 0deg), + #dddddd00 360deg + ); + transform: rotate(-90deg); /* Start animation from top */ + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; +} + +.inner-circle { + width: 30px; + height: 30px; + background: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.arrow { + font-size: 18px; + color: orange; + font-weight: bold; + transform: rotate(90deg); /* Fixed direction to the right */ +} From df10343f445b7fb406636bc638971c73ef35d86c Mon Sep 17 00:00:00 2001 From: SOUMYADIP GIRI <122915461+Soumyadipgithub@users.noreply.github.com> Date: Sun, 23 Feb 2025 18:54:59 +0530 Subject: [PATCH 03/13] Update index.html --- index.html | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 26cbd95..4d820bf 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,8 @@ + +
@@ -568,10 +570,14 @@