Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhanced scroll back button with timeline on it for smoother functioning. #360

Merged
merged 1 commit into from
Nov 2, 2024
Merged

Enhanced scroll back button with timeline on it for smoother functioning. #360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 147 additions & 2 deletions Achievements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,154 @@
</head>
<body>

<button class="go-top-btn">
<img width="35px" src="cropped_image.png" alt="go top">
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
<div class="scroll-top-icon">
<i class="fa-solid fa-arrow-up"></i>
</div>
<svg class="progress-ring" width="60" height="60">
<circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
cy="30"></circle>
</svg>
</button>
<style>
.scroll-top {
position: fixed;
right: 1.6%;
background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
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 {
transform: scale(1.1);
/* Subtle scaling instead of expanding */
box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
/* Slightly larger shadow */
}

.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 */
}
</style>
<script>
// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");
const progressCircle = document.querySelector(".progress-ring__circle");
const radius = progressCircle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

// Set the circle progress properties
progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
progressCircle.style.strokeDashoffset = circumference;

// Function to show or hide the button based on scroll position
function toggleScrollButton() {
if (window.scrollY > 100) {
scrollToTopBtn.classList.add("show");
} else {
scrollToTopBtn.classList.remove("show");
}
}

// Function to set the scroll progress on the button ring
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
progressCircle.style.strokeDashoffset = offset;
}

// Listen for scroll events to update button visibility and progress
window.addEventListener("scroll", () => {
toggleScrollButton();
const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
setProgress(scrollPercent);
});

// Smooth scroll to top when the button is clicked
scrollToTopBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});

</script>

<h1>Tony Stark's Remarkable Achievements</h1>

<div class="card">
Expand Down
180 changes: 147 additions & 33 deletions Appearances.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,154 @@
</style>
</head>

<button id="BacktoTop">
<div class="circle1">
<svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"></path>
</svg>
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
<div class="scroll-top-icon">
<i class="fa-solid fa-arrow-up"></i>
</div>
</button>
<svg class="progress-ring" width="60" height="60">
<circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
cy="30"></circle>
</svg>
</button>
<style>
.scroll-top {
position: fixed;
right: 1.6%;
background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
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 {
transform: scale(1.1);
/* Subtle scaling instead of expanding */
box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
/* Slightly larger shadow */
}

.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 */
}
</style>
<script>
// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");
const progressCircle = document.querySelector(".progress-ring__circle");
const radius = progressCircle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

// Set the circle progress properties
progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
progressCircle.style.strokeDashoffset = circumference;

// Function to show or hide the button based on scroll position
function toggleScrollButton() {
if (window.scrollY > 100) {
scrollToTopBtn.classList.add("show");
} else {
scrollToTopBtn.classList.remove("show");
}
}

// Function to set the scroll progress on the button ring
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
progressCircle.style.strokeDashoffset = offset;
}

// Listen for scroll events to update button visibility and progress
window.addEventListener("scroll", () => {
toggleScrollButton();
const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
setProgress(scrollPercent);
});

// Smooth scroll to top when the button is clicked
scrollToTopBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});

</script>

<body class="custom-page">

<!-- Circles -->
Expand Down Expand Up @@ -300,33 +441,6 @@ <h4 class="h46">Contact Us</h4>
</div>
</footer>
</div>

<script>
/* Back to Top Button */
const scrollToTopBtn = document.getElementById("BacktoTop");
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
if (
document.body.scrollTop > 50 ||
document.documentElement.scrollTop > 50
) {
scrollToTopBtn.style.visibility = "visible";
scrollToTopBtn.style.opacity = "1";
} else {
scrollToTopBtn.style.visibility = "hidden";
scrollToTopBtn.style.opacity = "0";
}
}

scrollToTopBtn.addEventListener("click", function () {
// Smooth scroll back to top
window.scrollTo({ top: 0, behavior: "smooth" });
});
</script>

<script>
window.onload = function () {
document.getElementById("search-bar").focus();
Expand Down
Loading