From 03393a6a9b0f77d5b6fdea7a91ef18f687db7635 Mon Sep 17 00:00:00 2001 From: tarunkumar2005 Date: Fri, 11 Oct 2024 22:58:00 +0530 Subject: [PATCH 1/3] Added the scroll to top button feature with enhanced ui and better functioning. --- index.html | 9 ++++-- script.js | 78 ++++++++++++++++++++++++++++++------------------ style.css | 87 +++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 134 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 9b1b9141..36e5cbf4 100644 --- a/index.html +++ b/index.html @@ -532,9 +532,14 @@

Contact Us

-
+
+ + + + diff --git a/script.js b/script.js index 17c4bac3..b6a47a7d 100644 --- a/script.js +++ b/script.js @@ -14,41 +14,63 @@ function toggleMenu() { menuList.style.paddingTop = "0px"; } } - window.onscroll = function() { - updateProgressBar(); - }; - -function updateProgressBar() { - var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; - var scrollHeight = - document.documentElement.scrollHeight - - document.documentElement.clientHeight; - var scrollPercent = (scrollTop / scrollHeight) * 100; - - document.getElementById("progressBar").style.width = scrollPercent + "%"; -} - -document.addEventListener("DOMContentLoaded", () => { - console.log("Website loaded successfully!"); -}); // Show or hide the scroll-top button based on scroll position -window.addEventListener("scroll", function () { - const scrollTopButton = document.querySelector(".scroll-top"); +window.addEventListener('scroll', function() { + const scrollTopButton = document.querySelector('.scroll-top'); if (window.pageYOffset > 300) { - scrollTopButton.style.display = "block"; + scrollTopButton.style.display = 'block'; } else { - scrollTopButton.style.display = "none"; + scrollTopButton.style.display = 'none'; } }); -// Smooth scroll to top when the button is clicked -function scrollToTop() { - window.scrollTo({ - top: 0, - behavior: "smooth", - }); -} +document.addEventListener('DOMContentLoaded', function() { + const scrollToTopBtn = document.getElementById('scrollToTopBtn'); + const progressRing = scrollToTopBtn.querySelector('circle'); + const rootElement = document.documentElement; + + const radius = progressRing.r.baseVal.value; + const circumference = radius * 2 * Math.PI; + + progressRing.style.strokeDasharray = `${circumference} ${circumference}`; + progressRing.style.strokeDashoffset = circumference; + + function setProgress(percent) { + const offset = circumference - percent / 100 * circumference; + progressRing.style.strokeDashoffset = offset; + } + + function handleScroll() { + const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight; + const scrolled = (rootElement.scrollTop / scrollTotal) * 100; + + // Show or hide the scroll-to-top button based on scroll position + if (window.pageYOffset > 300) { + scrollToTopBtn.classList.add('show'); + } else { + scrollToTopBtn.classList.remove('show'); + } + + // Update progress circle + requestAnimationFrame(() => { + setProgress(scrolled); + }); + } + + function scrollToTop() { + rootElement.scrollTo({ + top: 0, + behavior: 'smooth' + }); + } + + scrollToTopBtn.addEventListener('click', scrollToTop); + window.addEventListener('scroll', handleScroll); + + // Initial check in case the page is already scrolled on load + handleScroll(); +}); function toggleTheme() { const body = document.body; diff --git a/style.css b/style.css index 34b67787..e7b055ac 100644 --- a/style.css +++ b/style.css @@ -1012,23 +1012,90 @@ button:hover img { .scroll-top { position: fixed; - bottom: 20px; - right: 20px; - background: #ff459f; - padding: 10px; + bottom: 8%; + right: 1%; + background: linear-gradient(145deg, #ff459f, #ff6062); + color: white; + width: 60px; + height: 60px; border-radius: 50%; + border: none; cursor: pointer; - display: none; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4); + overflow: visible; + z-index: 10; /* Ensure button is on top */ + } + + .scroll-top.show { + opacity: 1; + visibility: visible; } .scroll-top:hover { - background: #ff6062; + transform: scale(1.1); /* Subtle scaling instead of expanding */ + box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6); /* Slightly larger shadow */ } - .hidden { - display: none; -} + .scroll-top:active { + transform: scale(1.05); /* Minor scale reduction on click */ + } + + .scroll-top-icon { + position: relative; + z-index: 2; + transition: transform 0.3s ease; + } + + .scroll-top:hover .scroll-top-icon { + transform: translateY(-3px); + } + + /* Progress Ring Styling */ + .progress-ring { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: rotate(-90deg); /* To start from the top */ + } + + .progress-ring__circle { + transition: stroke-dashoffset 0.35s; + transform-origin: 50% 50%; + } + + /* Pulse Animation */ + @keyframes pulse { + 0% { + box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4); + } + 50% { + box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7); + } + 100% { + box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4); + } + } + + .scroll-top:hover { + animation: pulse 1.5s infinite; + } + + .scroll-top.show { + animation: none; /* No animation when showing the button */ + } + + .scroll-top.show:hover { + animation: pulse 1.5s infinite; /* Pulse on hover */ + } .searchbar-outer{ width: 100%; From 0b7caeb9b36dbe6316e8f5c7e6f1c8d703f26d87 Mon Sep 17 00:00:00 2001 From: Tarun kumar <158801564+tarunkumar2005@users.noreply.github.com> Date: Fri, 11 Oct 2024 23:02:19 +0530 Subject: [PATCH 2/3] Delete package-lock.json --- package-lock.json | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 791d487f..00000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Collect-your-GamingTools", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} From 594be53e1277a91c9db6c7ffadeb8f69e5215345 Mon Sep 17 00:00:00 2001 From: tarunkumar2005 Date: Sat, 12 Oct 2024 09:56:52 +0530 Subject: [PATCH 3/3] Made the scroll to top button in the center of the page. --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index e7b055ac..144a9123 100644 --- a/style.css +++ b/style.css @@ -1012,8 +1012,8 @@ button:hover img { .scroll-top { position: fixed; - bottom: 8%; - right: 1%; + bottom: 1%; + right: 50%; background: linear-gradient(145deg, #ff459f, #ff6062); color: white; width: 60px;