Author: | nat-davydova |
---|---|
Views Total: | 1,352 views |
Official Page: | Go to website |
Last Update: | August 27, 2019 |
License: | MIT |
Preview:

Description:
A responsive, mobile-first, SEO-friendly, Material Design styled timeline to present your events, tasks, milestone, stories, and much more.
How to use it:
The HTML structure for the timeline. Insert your own event data (titles, descriptions, actions buttons, start/end dates, etc.) as follows:
<div class="timeline"> <div class="timeline__bar"></div> <div class="timeline__elem timeline__elem--left"> <div class="timeline__date"><span class="timeline__date-day">10</span><span class="timeline__date-month">Jul</span></div> <div class="timeline__event"> <div class="timeline__event-date-time"> <div class="timeline__event-date"> <span>10/07/2019</span></div> <div class="timeline__event-time"><span>12:30</span></div> </div> <h4 class="timeline__event-title">Event 1</h4> <div class="timeline__event-descr"> <p>Event 1 Description</p> </div> <div class="timeline__event-actions"><a class="timeline__event-action" href="#" title="Learn More">Learn More </a><a class="timeline__event-action" href="#" title="Contact Us">Contact Us</a></div> </div> </div> <div class="timeline__elem timeline__elem--right"> <div class="timeline__date"><span class="timeline__date-day">18</span><span class="timeline__date-month">Jul</span></div> <div class="timeline__event"> <div class="timeline__event-date-time"> <div class="timeline__event-date"> <span>18/07/2019</span></div> <div class="timeline__event-time"><span>12:30</span></div> </div> <h4 class="timeline__event-title">Event 2</h4> <div class="timeline__event-descr"> <p>Event 2 Description</p> </div> <div class="timeline__event-actions"><a class="timeline__event-action" href="#" title="Learn More">Learn More </a><a class="timeline__event-action" href="#" title="Contact Us">Contact Us</a></div> </div> </div> </div>
The necessary CSS for the timeline. Copy and paste the following CSS snippets into your page.
.timeline { position: relative; min-height: 500px; width: 100%; padding: 60px 0; } .timeline__bar { position: absolute; top: 0; left: 50%; width: 6px; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-image: linear-gradient(#ffce79, #9b74ff); } .timeline__bar:before, .timeline__bar:after { position: absolute; left: 50%; display: block; width: 12px; height: 12px; content: ''; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; } .timeline__bar:before { top: -1px; background-color: #ffce79; } .timeline__bar:after { bottom: -1px; background-color: #9b74ff; } .timeline__elem { position: relative; display: flex; flex-direction: column; margin-bottom: 30px; } .timeline__elem:last-child { margin-bottom: 0; } @media (min-width: 900px) { .timeline__elem { flex-direction: row; } } @media (min-width: 900px) { .timeline__elem--right { justify-content: flex-end; } } .timeline__date { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; margin: auto; color: #fff; background-repeat: no-repeat; border-radius: 50%; border: 6px solid #fff; } @media (min-width: 900px) { .timeline__date { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .timeline__date-day { font-size: 1.35rem; font-weight: 600; } .timeline__date-month { font-size: .85rem; } .timeline__event { position: relative; width: 90%; margin: 30px auto 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); background-color: #fff; } @media (min-width: 560px) { .timeline__event { width: 65%; } } @media (min-width: 900px) { .timeline__event { width: calc((100% - 70px - 8px * 4) / 2); margin: 0; } } .timeline__event:before { position: absolute; top: 50%; display: none; width: 0; height: 0; content: ''; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .timeline__event:after { position: absolute; top: 50%; display: none; width: 16px; height: 16px; content: ''; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } @media (min-width: 900px) { .timeline__event:before, .timeline__event:after { display: block; } } .timeline__event--left:before { right: -8px; border-left: 8px solid #fff; } .timeline__event--left:after { right: -7px; box-shadow: 2px -1px 1px 0 rgba(0, 0, 0, 0.08); } .timeline__event--right:before { left: -8px; border-right: 8px solid #fff; } .timeline__event--right:after { left: -7px; box-shadow: -2px 2px 1px 0 rgba(0, 0, 0, 0.08); } .timeline__event-date-time { padding: 20px 15px 0; display: flex; margin-bottom: 15px; font-size: .8rem; color: rgba(44, 44, 44, 0.7); } .timeline__event-date { margin-right: 10px; } .timeline__event-title { padding: 0 15px; margin-bottom: 15px; font-size: 1.25rem; font-weight: 600; } .timeline__event-descr { padding: 0 15px 20px; font-size: .9rem; line-height: 1rem; } .timeline__event-descr p { margin-bottom: 10px; } .timeline__event-descr p:last-child { margin-bottom: 0; } .timeline__event-actions { padding: 20px 15px; border-top: 1px solid rgba(160, 160, 160, 0.2); } .timeline__event-action { transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; transition-delay: 0s; margin-right: 24px; font-size: .9rem; text-transform: uppercase; } .timeline__event-action:hover { opacity: .4; }
The JavaScript to enable the timeline.
//DOM STRINGS OBJECT const DOM = { timelineDate: document.querySelectorAll('.timeline__date'), timelineElem: document.querySelectorAll('.timeline__elem'), timelineBar: document.querySelector('.timeline__bar') }; //TIMELINE ELEM SET DIRECTION TO EVENT ITEMS (left or right oriented) //getting direction from .timeline-elem const __getDir = timelineElem => { if (timelineElem.classList.contains('timeline__elem--left')) { return 'left' } else if (timelineElem.classList.contains('timeline__elem--right')) { return 'right' } }; const setDirEvent = () => { DOM.timelineElem.forEach(elem => { const direction = __getDir(elem); const timelineEvent = elem.querySelector('.timeline__event'); timelineEvent.classList.add(`timeline__event--${direction}`); }); }; //TIMELINE ELEM DATE STYLES (background) const __getBGImage = () => { const compStyle = getComputedStyle(DOM.timelineBar); return compStyle.backgroundImage; }; const __getBGSize_height = () => { const timebarHeight = DOM.timelineBar.offsetHeight; return timebarHeight; } const __getBGPos_y = (dateElem) => { const timelinebarBox = DOM.timelineBar.getBoundingClientRect(); const dateBox = dateElem.getBoundingClientRect(); const pos_y = dateBox.top - timelinebarBox.top; return pos_y; } const setDateBG = () => { const bgImg = __getBGImage(); const bgHeight = __getBGSize_height(); DOM.timelineDate.forEach(elem => { //setting bgImage elem.style.backgroundImage = bgImg; //setting bgSize elem.style.backgroundSize = `100% ${bgHeight}px`; //setting bgPosition const dateOffset = __getBGPos_y(elem); elem.style.backgroundPosition = `0 -${dateOffset}px`; }); }; //ONLOAD FUNCTION window.addEventListener('load', () => { //setting direction class to the timeline event block setDirEvent(); //set date background styles setDateBG(); });