Create a vertical Timeline using HTML, CSS and JavaScript

In this tutorial, we are going to learn how to create a timeline to show work experience or projects on a portfolio website. Here we will use HTML, CSS, and JavaScript.

index.html

The markup we will use to structure elements with the help of <div> tags, we divided every event inside the class section. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Timeline</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Main-container">
        <div class="top">
            <h1>CodeSpeedy</h1>
            <p>A Place Where You Find Solutions In Coding And Programming For PHP, WordPress, HTML, CSS, JavaScript, Python, C++ and much more.
                Hire us for your software development, mobile app development and web development project.
            </p>
        </div>
        <div class="middle">
            <div class="center-line"></div>
            <div class="section">
                <div class="rect-box"></div>
                <div class="content">
                    <h2>Web Development</h2>
                    <p><ul>
                        <li>HTML and JavaScript QR Code Generator Script</li>
                        <li>Bulk Domain Authority Checker PHP Script</li>
                        <li>Blue AJAX Weather Forecast PHP Script</li>
                    </ul></p>
                </div>
            </div>

            <div class="section">
                <div class="rect-box"></div>
                <div class="content">
                    <h2>Programming Blogs</h2>
                    <p><ul>
                        <li>Get Base64 string of an image in JavaScript</li>
                        <li>Stop form submission in JavaScript</li>
                        <li>Database CRUD Operation with MySQL</li>
                    </u></p>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

After applying basic CSS, we will also style ::after pseudo-element.

We will differentiate the style because of :nth-child(odd). You can change the size of the section according to you need. If you want to change the middle line symbol then change the property of the rect-box.

 

body{
    margin: 0px;
    padding: 0px;
    color: #fff;
    background-color: #32069b;
}
.Main-container{
    padding-bottom: 400px;
    margin: 0 auto;
    max-width: 700px;
}
.top{
    text-align: center;
    padding: 4rem 0;
    max-width: 800px;
    margin-left:auto;
    margin-right: auto;
}
.middle{
    position: relative;
    min-height: 150px;
}
.center-line{
    position: absolute;
    z-index: 2;
    left: calc(50% - 1px);
    width: 2px;
    top: -50px;
    background-color: rgb(19, 17, 17);
    display: none;
}
.center-line:before,
.center-line::after{
    height: 1.5rem;
    width: 1.5rem;
    position: absolute;
    display: block;
    content: '';
    background-color: rgb(0, 0, 0);
    left: 50%;
    transform: translateX(-50%);
}
.center-line:after{
    bottom: 0;
}
.rect-box{
    position: absolute;
    display: block;
    height: 1rem;
    width: 1rem;
    border-radius: 100%;
    background-color: #fff;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
}
.section{
    display: flex;
    transition: 600ms ease;
    position: relative;
    z-index: 1;
    margin: 5px 0;
    padding: 0.5rem;
    align-items: center;
    min-height: 200px;
}
.section:nth-child(odd){
    flex-direction: row-reverse;
    transform: translateX(100%);
}
.content{
    width: calc(50% - 2rem);
}
.show-me:nth-child(n){
    transform: none;
    opacity: 1;
}
h1{
    font-weight: 400px;
    letter-spacing: 1px;
    background-color: cornsilk;
    color: #027c31;
}
h2{
    background-color: rgb(255, 80, 80);
    padding: 5px;
}

script.js

To manipulate the HTML we are using DOM(Document Object Model) queries. Everything is an object in javascript. Here is the scrollHandler function which controls the window scroll, on the basis of that we make our section visible.

function query(selector, all = false) {
    return all ? document.querySelectorAll(selector) : document.querySelector(selector)
}
let sections = query('.section', true);
let middle = query('.middle');
let center_line = query('.center-line');
center_line.style.bottom = `calc(100% - 20px)`;
let y0 = window.scrollY;
let up, down;
let full = false;
let set = 0;
const y = window.innerHeight * 0.8;
//function definition
let scrollHandler=function(e){
    const{
        scrollY
    } = window;
    up = scrollY < y0;
    down = !up;
    const middleRect = middle.getBoundingClientRect();
    const Rect = center_line.getBoundingClientRect();
    const dist = y - middleRect.top;
    if (down && !full){
        set = Math.max(set, dist);
            center_line.style.bottom = `calc(100% - ${set}px)`;
    }
    if (dist > middle.offsetHeight + 50 && !full){
        full = true;
        center_line.style.bottom = `-50px`;
    }
    sections.forEach(function(item) {
        const rect = item.getBoundingClientRect();

        if(rect.top + item.offsetHeight / 5 < y) {
            item.classList.add('show-me');
        }
    });

    y0 = window.scrollY;
}
//function call
scrollHandler();
center_line.style.display = 'block';
window.addEventListener('scroll', scrollHandler)

output:

Create a vertical Timeline using HTML, CSS and JavaScript.

To make it responsive required to use the @media query in CSS. It will help you to resize your content based on screen size.

If you think this is helpful then please share it with your friends and give suggestions.

Leave a Reply

Your email address will not be published. Required fields are marked *