Introduction
We were rebuilding a client's website and they wanted to integrate a nice simple responsive timeline. I though this was the perfect opportunity to create something esthetic and useful that could easily be re-usable.
Desktop Version:
Mobile Version:
Source: http://medericburlet.com/material-timeline/
GitHub: https://github.com/crimson-med/Material-Timeline
Technology Stack
For this project I used three technologies: HTML, CSS, Javascript (JQuery).
- HTML: This was used to have the data and the layout of the page.
- CSS: This was used for themeing and for animating the dates left to right.
- Javascript (JQuery): This was used to handle when the element is in the users field of view. In the project I use JQuery as this was integrated on the clients website.
You could replace the JQuery with vanilla Javascript if needed.
Understanding the code
Fair warning the code might be a little WET (Write Everything Twice) as it was a small projects at my JQuery beginnings.
HTML
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/materialTimeline.css">
</head>
<body>
<div id="timeline"></div>
</body>
<script src="js/jquery.js"></script>
<script src="js/materialTimeline.js"></script>
<script type="text/javascript">
var myDates = [
{"date": "1959","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
{"date": "1991","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
{"date": "1994","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
{"date": "2000","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
{"date": "2004","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
{"date": "2011","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
{"date": "2013","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."},
{"date": "2018","content":"Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam."}
];
renderTimeline(myDates);
</script>
<script src="js/fadeinTimeline.js"></script>
</html>
I guess this doesn't need much explaining as it is basic HTML, we include the CSS in the head and then a dive to render the timeline as well as adding the Javascript files.
CSS
The CSS is pretty simple, I define at the top the CSS variables (didn't use SASS as it was a really small scale short project).
:root {
--bg-color: #f8b195;
--text-color:#355c7d;/* Dark Blue #355c7d */
--timeline-color:#f67280;
--date-bg-color:#f67280;
--date-text-color:var(--text-color);
--line-color:var(--text-color);
--header-color:var(--text-color);
}
At the bottom of the file you have the media query for mobile responsiveness.
The current breakpoint is: @media (max-width: 600px)
However this is easily changed.
Javascript
There are two javascript files in this project.
This file is the main function for handling the instance where an element comes into the field of view of the user (eg: when they scroll down the page).
This file is the main function for rendering the timeline on the webpage.
Conclusion
This was a fun simple project that got me to discover JQuery and CSS animations if I had to redo it I would make a vanilla javascript version as this would mean better availability on all browsers. And I would maybe add a small generator where people can choose colors and just get the html code.
Mederic Burlet
Top comments (0)