Introduction
A vertical timeline displays event schedules, project milestones, or historical progressions in sequential order. In this guide, I will show you how to create an animated vertical timeline using HTML CSS and jQuery code.
By the end, you’ll have a functional timeline design that you can customize and use in various projects. Let’s get started!
✅ Watch Live Preview 👉👉
Click Here to Download the Code
Table of contents
What is a Vertical timeline?
A vertical timeline is a visual design element that is used to display events, milestones, or activities in chronological order along a vertical axis.
It organizes information clearly, making it easy to track progress or history.
It is commonly used in portfolios, resumes, and company history pages to enhance clarity and visual appeal.
Why Use It?
- Clarity: It helps present sequential information in a clean and structured way.
- Engagement: Makes data more visually appealing compared to a plain list.
- Responsiveness: Adapts well to different screen sizes, especially on mobile devices.
What are the Steps to Create It?
Here’s an overview of the process:
- Plan the structure of your timeline.
- Write the basic HTML for the timeline layout.
- Style the timeline using CSS.
- Add interactivity using jQuery code.
Similar Posts: How to Build a Responsive Vertical Timeline using HTML CSS and JavaScript
Plan for Timeline Layout
Before writing any code, take a moment to visualize how the timeline will look. A typical design includes:
- A central line indicates the timeline path.
- Items (or events) are positioned alternately on either side of the line.
- A title or description for each event.
- Icons or markers to highlight key events.
Set Up Your Project Folder
Create a folder on your computer and add the following files inside it:
- index.html
- style.css
- script.js
Source Code
HTML Code Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Vertical Timeline using HTML CSS & jQuery</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap">
</head>
<body>
<!-- CODE -->
<script src="script.js"></script>
</body>
</html>
CSS Code Structure
< /* Your CSS code here */ >
< * { >
< margin: 0; >
< padding: 0 >
< box-sizing: border-box; >
< text-decoration: none; >
< } >
jQuery Code Structure
< // jQuery Code >
Why Use jQuery for a Timeline?
jQuery simplifies DOM manipulation and event handling which makes it easier to build interactive components.
While modern JavaScript achieves similar results, jQuery offers a quick and simple solution for developers who prefer its syntax.
Test and Customize
- Test Responsiveness: Resize your browser window to ensure the timeline adapts to smaller screens. Adjust padding or font sizes in the CSS as needed.
- Add More Features: Enhance the timeline with icons, images, or tooltips for each event.
- Experiment with Animations: Use additional CCS animations and jQuery for smoother interactions.
Key Customization Tips
- Icons: Add icons to each timeline event to make it more visually appealing. You can use a library like Font Awesome for easy integration.
- Colors: Customize the colors to match your website’s theme. Change the line, marker, and content background colors in the CSS.
- Responsiveness: Ensure your timeline looks good on all devices by using media queries to adjust the layout for mobile screens.
Also read: How to Build a Responsive Credit Card Form with HTML CSS & jQuery
Conclusion
Building a timeline is an excellent project, whether you’re a beginner or advanced. It will enhance your web development skills. You can use it for various purposes, from showcasing personal milestones to highlighting professional achievements.
Be sure to test it thoroughly and customize it to meet your project’s needs. Now, it’s your turn to start building an animated vertical timeline.
15 people bought this
Grab it Now for Just 50 ₹100
