Create a Timeline Portfolio
Web developer Martin Angelov demonstrates how you can create a Timeline Portfolio. Timeline is a jQuery plugin that shows chronological series of events. Here, you can embed different types of media such as videos, maps, tweets then associate them with date.
Basic layout:
HTML
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Timeline Portfolio | Tutorialzine Demo</title> <!-- The default timeline stylesheet -->
<link rel="stylesheet" href="assets/css/timeline.css" />
<!-- Our customizations to the theme -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Google Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dancing+Script|Antic+Slab" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="timeline">
<!-- Timeline will generate additional markup here -->
</div>
<!-- JavaScript includes - jQuery, turn.js and our own script.js -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/timeline-min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
The head section there’s the plugin stylesheet (timeline.css and style.css) which holds the modifications. The footer (jQuery library, timeline plugin, script.js) initializes it.
When the plugin is called, it will search for div on your page. Inside, it will insert the needed markup to present timeline.
<div id="timeline"> <div style="overflow-y: hidden;"> <div>
<!-- The divs below are the events of the timeline -->
<div> <div>
<h2>Johnny B Goode</h2> <p><em><span>Designer</span> & <span class= "c2">Developer</span></em></p>
</div>
<div> <!-- Images or other media go here --> </div> </div>
<div> <div>
<h2>March 2009</h2> <h3>My first experiment in time-lapse photography</h3> <p>Nature at its finest in this video.</p>
</div>
<div> <!-- Images or other media go here --> </div> </div>
<!-- More items go here --> </div>
<!-- Next arrow --> <div> <div></div> <div>March 2010</div> <div>Logo Design for a pet shop</div> </div>
<!-- Previous arrow --> <div> <div></div> <div>July 2009</div> <div>Another time-lapse experiment</div> </div> </div>
<div>
<!-- The navigation items go here (the tooltips in the bottom) one for each of the events -->
<div> <!-- The timeline numbers go here --> </div> </div>
<div> <div style="left: 633px;"></div>
<div></div> </div>
<div style="top: 27px;"> <div title="Return to Title"></div> <div title="Expand Timeline"></div> <div data-original-title="Contract Timeline"></div> </div> </div> </div>
jQuery
$(function(){
var timeline = new VMM.Timeline(); timeline.init("data.json");
});
CSS
Styles.css
#timeline{ background:none; }
/* The individual events in the slider */ .slider .slider-container-mask .slider-container{ background:none; }
/* Setting a custom background image */ #timeline div.navigation{ background: url('../img/timeline_bg.jpg') repeat; border-top:none; }
Creating the 3D effect of the timeline navigation
#timeline div.navigation:before{ position:absolute; content:''; height:40px; width:100%; left:0; top:-40px; background: url('../img/timeline_bg.jpg') repeat; } #timeline div.navigation:after{ position:absolute; content:''; height:10px; width:100%; left:0; top:-40px; background:repeat-x; background-image: linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%); }
Adding dark background to the timeline navigation
#timeline div.timenav-background{ background-color:rgba(0,0,0,0.4) !important; } #timeline .navigation .timenav-background .timenav-interval-background{ background:none; } #timeline .top-highlight{ background-color:transparent !important; }
Zoom-in / zoom-out buttons and toolbar
#timeline .toolbar{
border:none !important;
background-color: #202222 !important;
}
#timeline .toolbar div{
border:none !important;
}
Numeric scale at the bottom
#timeline .navigation .timenav .time .time-interval-minor .minor{
margin-left:-1px;
}
#timeline .navigation .timenav .time .time-interval div{
color: #CCCCCC;
}
Previous and next arrows
.slider .nav-previous .icon {
background: url("timeline.png") no-repeat scroll 0 -293px transparent;
}
.slider .nav-previous,.slider .nav-next{
font-family:'Segoe UI',sans-serif;
}
.slider .nav-next .icon {
background: url("timeline.png") no-repeat scroll 72px -221px transparent;
width: 70px !important;
}
.slider .nav-next:hover .icon{
position:relative;
right:-5px;
}
.slider .nav-previous:hover, .slider .nav-next:hover {
color: #666;
cursor: pointer;
}
#timeline .thumbnail {
border: medium none;
}
Loading screen
#timeline .feedback {
background-color: #222222;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
border:none;
}
#timeline .feedback div{
color: #AAAAAA;
font-size: 14px !important;
font-weight: normal;
}
Moving on to the slides
#timeline .slider-item h2,
#timeline .slider-item h3{
font-family:'Antic Slab','Segoe UI',sans-serif;
}
#timeline .slider-item h2{
color:#fff;
}
#timeline .slider-item p{
font-family:'Segoe UI',sans-serif;
}
#timeline .slider-item img,
#timeline .slider-item iframe{
border:none;
}
Customizing the front page’s appearance
/* Customizing the first slide - the cover */
#timeline .slider-item:nth-child(1) h2{
font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
background:rgba(0,0,0,0.3);
white-space: nowrap;
padding:10px 5px 5px 20px;
position:relative;
right:-60px;
z-index:10;
}
#timeline .slider-item:nth-child(1) p i{
font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
background:rgba(0,0,0,0.3);
white-space: nowrap;
padding:5px 20px;
position:relative;
right:-60px;
z-index:10;
}
#timeline .slider-item:nth-child(1) p .c1{
color:#1bdff0;
}
#timeline .slider-item:nth-child(1) p .c2{
color:#c92fe6;
}
#timeline .slider-item:nth-child(1) .media-container {
left: -30px;
position: relative;
z-index: 1;
}
#timeline .slider-item:nth-child(1) .credit{
text-align: center;
}
Check out the full tutorial by clicking on the image.
View the DEMO and get the DOWNLOAD.
0
503
