Create Simple Scroll Timeline Using HTML, CSS and JS
Published in
5 min readDec 4, 2022
Scroll timeline is an interesting tracker in the web UI for tracking user reading progress. With scroll timeline, user can seeing current progress/percentage.
For example 👇
Now we can try to implement this scroll timeline. But, surprisingly this feature is simple and easy to create 👀
Basic Setup
HTML
Just basic structured HTML document with some dummy text 😃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Simple Scroll Timeline</title>
</head>
<body>
<header>
<div class="container flex-center">
<h1>Simple Scroll Timeline</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vitae voluptatibus omnis nam, est
nesciunt
minus nemo eaque incidunt iusto.</p>
</div>
</header>
<main>
<section class="container flex-center">
<h1>Section 1</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi nobis ex eveniet ad qui perspiciatis
omnis perferendis fugiat sed obcaecati optio nesciunt, molestias voluptates porro deserunt cupiditate
beatae? Tempore itaque vel at accusantium earum recusandae totam facilis. Ea recusandae mollitia laborum
accusantium minima qui! Adipisci est aliquid neque quidem itaque iure cupiditate repudiandae dolor
necessitatibus! Voluptas temporibus laudantium quibusdam quas voluptatem, modi repellat voluptate labore
similique accusantium optio sequi aperiam dolore iure alias minus, amet quis. At commodi, unde
consectetur nemo ad facere necessitatibus, ea dolores quisquam iure rerum veritatis magni sit laborum
est animi fugit, amet earum aliquam rem?</p>
</section>
<section class="container flex-center">
<h1>Section 2</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi nobis ex eveniet ad qui perspiciatis
omnis perferendis fugiat sed obcaecati optio nesciunt, molestias voluptates porro deserunt cupiditate
beatae? Tempore itaque vel at accusantium earum recusandae totam facilis. Ea recusandae mollitia laborum
accusantium minima qui! Adipisci est aliquid neque quidem itaque iure cupiditate repudiandae dolor
necessitatibus! Voluptas temporibus laudantium quibusdam quas voluptatem, modi repellat voluptate labore
similique accusantium optio sequi aperiam dolore iure alias minus, amet quis. At commodi, unde
consectetur nemo ad facere necessitatibus, ea dolores quisquam iure rerum veritatis magni sit laborum
est animi fugit, amet earum aliquam rem?</p>
</section>
<section class="container flex-center">
<h1>Section 3</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi nobis ex eveniet ad qui perspiciatis
omnis perferendis fugiat sed obcaecati optio nesciunt, molestias voluptates porro deserunt cupiditate
beatae? Tempore itaque vel at accusantium earum recusandae totam facilis. Ea recusandae mollitia laborum
accusantium minima qui! Adipisci est aliquid neque quidem itaque iure cupiditate repudiandae dolor
necessitatibus! Voluptas temporibus laudantium quibusdam quas voluptatem, modi repellat voluptate labore
similique accusantium optio sequi aperiam dolore iure alias minus, amet quis. At commodi, unde
consectetur nemo ad facere necessitatibus, ea dolores quisquam iure rerum veritatis magni sit laborum
est animi fugit, amet earum aliquam rem?</p>
</section>
<section class="container flex-center">
<h1>Section 4</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi nobis ex eveniet ad qui perspiciatis
omnis perferendis fugiat sed obcaecati optio nesciunt, molestias voluptates porro deserunt cupiditate
beatae? Tempore itaque vel at accusantium earum recusandae totam facilis. Ea recusandae mollitia laborum
accusantium minima qui! Adipisci est aliquid neque quidem itaque iure cupiditate repudiandae dolor
necessitatibus! Voluptas temporibus laudantium quibusdam quas voluptatem, modi repellat voluptate labore
similique accusantium optio sequi aperiam dolore iure alias minus, amet quis. At commodi, unde
consectetur nemo ad facere necessitatibus, ea dolores quisquam iure rerum veritatis magni sit laborum
est animi fugit, amet earum aliquam rem?</p>
</section>
</main>
<footer class="flex-center">
<p>Lorem ipsum dolor sit amet.</p>
</footer>
</body>
</html>CSS
In here, we use simple CSS Flex Box for styling to HTML content.
* {
margin: 0;
padding: 0;
}
header {
height: 50vh;
color: white;
background-color: #5b21b6;
}
.container {
height: 20rem;
max-width: 900px;
margin: auto;
padding: 1rem 2rem;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2rem;
}
footer {
text-align: center;
height: 2rem;
background-color: #5b21b6;
color: white;
}Output
The output will be like this. But, if we scroll down, the scroll timeline not showing.
Scroll Timeline 🙌
Adding Scroll Timeline element
In your HTML document, add new element using <div> tag and set the class to scroll-timeline . This element will showed in the web UI for tracking progress.
<div class="scroll-tracker"></div>Styling this new element
Basically this style will setting the element for always on the top of the page. Both, when user scroll down or scroll up.
.scroll-tracker {
position: fixed;
inset: 0;
height: 0.5rem;
background-color: aqua;
}Adding Javascript in HTML
Inside <head> element, add <script> tag to load the Javascript file. But before we add this, please make sure you already create the Javascript file in this path js/app.js .
<script src="js/app.js" type="module" defer></script>Maybe you notice in this <script> tag we add these following attributes :
src="js/app.js”: For referencing or locate the Javascript file.type=”module”: Causes the code to be treated as a JavaScript module. Can enable us to useimportandexportin javascript.defer: This boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firingDOMContentLoaded.
Read here if you interested to explore more deep about these attribute.
Write script scrolltimeline
Edit your file at js/app.js and add this code.
// Scroll timeline reference : https://github.com/flackr/scroll-timeline
import "https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js";
const scrollTracker = document.querySelector(".scroll-tracker");
const scrollTrackerTimeline = new ScrollTimeline({
source: document.scrollingElement,
orientation: "block",
scrollOffsets: [CSS.percent(0), CSS.percent(100)],
});
scrollTracker.animate(
{
transform: ["scaleX(0)", "scaleX(1)"],
},
{
duration: 1,
timeline: scrollTrackerTimeline,
}
);This code will import new module scroll-timeline.js in line 2 and apply some functionally to the element scroll-timeline using CSS selector.
You can read more detail about scroll-timeline.js in this official repository.
