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

feat: Scroll down progress bar added #1035

Merged
merged 3 commits into from
Jul 17, 2024
Merged

feat: Scroll down progress bar added #1035

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a80e6e
appropriate meta tags are added for making SEO friendly
chaanakyaaM Jul 7, 2024
f790239
scroll down progress bar added
chaanakyaaM Jul 9, 2024
0464ab2
Merge branch 'main' into new-branch
chaanakyaaM Jul 15, 2024
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
53 changes: 39 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

<!DOCTYPE html>
<html lang="en">

Expand Down Expand Up @@ -342,6 +343,10 @@ <h1>TourGuide . . .</h1>
</nav>
</div>
<header>
<div class="nav-wrapperr">
<div class="progress-bar"></div>
</div>

<section class="section__container header__container" id="Home">
<div class="header__image" data-aos="fade-down-right">
<img src="https://i.ibb.co/88Qnjxg/pexels-josh-hild-2422259.jpg" alt="header" />
Expand Down Expand Up @@ -1940,30 +1945,50 @@ <h4>Contact Us</h4>
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
function animateValue(id, start, end, duration) {
const obj = document.getElementById(id);
const startTime = performance.now();

function updateValue(timestamp) {
const elapsedTime = timestamp - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const currentValue = Math.floor(progress * (end - start) + start);
obj.textContent = currentValue;
if (progress < 1) {
requestAnimationFrame(updateValue);
}

<script>

document.addEventListener('DOMContentLoaded', function() {
function animateValue(id, start, end, duration) {
const obj = document.getElementById(id);
const startTime = performance.now();

function updateValue(timestamp) {
const elapsedTime = timestamp - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const currentValue = Math.floor(progress * (end - start) + start);
obj.textContent = currentValue;
if (progress < 1) {
requestAnimationFrame(updateValue);

}

requestAnimationFrame(updateValue);
}
</script>


<script>
const scrollline = document.querySelector('.progress-bar');

function fillscrollline(){
const windowHeight = window.innerHeight;
const fullHeight = document.body.clientHeight;
const scrolled = window.scrollY;
const percentScrolled = (scrolled / (fullHeight - windowHeight)) * 100;

scrollline.style.width = percentScrolled + '%';
};

window.addEventListener('scroll', fillscrollline);


// Call the function for each count-up element
animateValue("guidesCount", 0, 25000, 20000);
animateValue("toursCount", 0, 20000, 20000);
animateValue("destinationsCount", 0, 10994, 20000);
});

</script>


Expand Down
Loading