- Notifications
You must be signed in to change notification settings - Fork74
Timeline - A vertical / horizontal JavaScript timeline plugin
License
squarechip/timeline
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A vanilla JavaScript horizontal / vertical timeline.
Horizontal timeline demo |Vertical timeline demo
- Responsive
- Configure settings using the API or through data attributes
- Built with performance in mind
- Small file size
- Library agnostic. If jQuery is present it will register itself as a plugin
- Written in ES6 and transpiled into ES5 via Babel
Link the required files
<scriptsrc="/dist/js/timeline.min.js"></script><linkhref="/dist/css/timeline.min.css"rel="stylesheet"/>
HTML markup
<divclass="timeline"><divclass="timeline__wrap"><divclass="timeline__items"><divclass="timeline__item"><divclass="timeline__content"> Content / markup here</div></div><divclass="timeline__item"><divclass="timeline__content"> Content / markup here</div></div><divclass="timeline__item"><divclass="timeline__content"> Content / markup here</div></div><divclass="timeline__item"><divclass="timeline__content"> Content / markup here</div></div><divclass="timeline__item"><divclass="timeline__content"> Content / markup here</div></div></div></div></div>
Initialize the plugin
JavaScript
timeline(document.querySelectorAll('.timeline'));
jQuery
jQuery('.timeline').timeline();
Using data attributes will take priority over settings via the API.
mode
Choose whether the timeline should be vertical or horizontal
JavaScript/jQuery
default: 'vertical'options: 'vertical', 'horizontal'Data attribute
<divclass="timeline"data-mode="horizontal"> ...</div>
forceVerticalMode
When using the timeline in horizontal mode, define at which viewport width it should revert to vertical mode
JavaScript/jQuery
default: 600options: integerData attribute
<divclass="timeline"data-force-vertical-mode="600"> ...</div>
horizontalStartPosition
When using the timeline in horizontal mode, define the vertical alignment of the first item
JavaScript/jQuery
default: 'top'options: 'bottom', 'top'Data attribute
<divclass="timeline"data-horizontal-start-position="top"> ...</div>
moveItems
When using the timeline in horizontal mode, define how many items to move when clicking a navigation button
JavaScript/jQuery
default: 1options: integerData attribute
<divclass="timeline"data-move-items="1"> ...</div>
rtlMode
When using the timeline in horizontal mode, this defines whether the timeline should start from the right. This overrides the startIndex setting.
JavaScript/jQuery
default: falseoptions: true / falseData attribute
<divclass="timeline"data-rtl-mode="true"> ...</div>
startIndex
When using the timeline in horizontal mode, define which item the timeline should start at
JavaScript/jQuery
default: 0options: integerData attribute
<divclass="timeline"data-start-index="0"> ...</div>
verticalStartPosition
When using the timeline in vertical mode, define the alignment of the first item
JavaScript/jQuery
default: 'left'options: 'left', 'right'Data attribute
<divclass="timeline"data-vertical-start-position="right"> ...</div>
verticalTrigger
When using the timeline in vertical mode, define the distance from the bottom of the screen, in percent or pixels, that the items slide into view
JavaScript/jQuery
default: '15%'options: percentage or pixel value e.g. '20%' or '150px'Data attribute
<divclass="timeline"data-vertical-trigger="150px"> ...</div>
visibleItems
If using the timeline in horizontal mode, define how many items are visible in the viewport
JavaScript/jQuery
default: 3options: integerData attribute
<divclass="timeline"data-visible-items="3"> ...</div>
With 4 items visible in the viewport and changes into vertical mode at a 800px breakpoint
JavaScript
timeline(document.querySelectorAll('.timeline'), { mode: 'horizontal', visibleItems: 4, forceVerticalMode: 800});jQuery
jQuery('.timeline').timeline({ mode: 'horizontal', visibleItems: 4, forceVerticalMode: 800});Data attributes
timeline(document.querySelectorAll('.timeline'));OrjQuery('.timeline').timeline();
And
<divclass="timeline"data-mode="horizontal"data-visible-items="4"data-force-vertical-width="800"> ...</div>
With the first item aligned to the right and the elements set to come into view 150px from the bottom of the window
JavaScript
timeline(document.querySelectorAll('.timeline'),{verticalStartPosition:'right',verticalTrigger:'150px'});
jQuery
jQuery('.timeline').timeline({verticalStartPosition:'right',verticalTrigger:'150px'});
Data attributes
timeline(document.querySelectorAll('.timeline'));OrjQuery('.timeline').timeline();
And
<divclass="timeline"data-vertical-start-position="right"data-vertical-trigger="150px"> ...</div>
- Ability to choose how many items are visible at user defined breakpoints when using the timeline in horizontal mode
- Ability to set how many items slide at a time when navigating through the horizontal timeline
- Ability to set trigger distance from the top of the page in vertical mode
- Add a horizontal start position option
- Generate a tab menu to navigate to specific items
- Ability to change classes for the HTML elements
- Add various animation options for the vertical timeline (e.g. slide up/slide in/fade in)
About
Timeline - A vertical / horizontal JavaScript timeline plugin
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.