Timeline
is a jQuery plugin specialized in showing a chronological series of
events. You can embed all kinds of media including tweets, videos and
maps, and associate them with a date. With some design tweaks, this will
make it perfect for a portfolio in which you showcase your work and
interests.
First, let’s look at the basic layout of the page:
In the head section, we have the plugin’s stylesheet – timeline.css,
and styles.css, which will hold our customizations. In the footer we
have the jQuery library, timeline plugin and script.js which initializes it.
When we call the plugin, it will search for a div on your page with the ID of timeline. Inside it, it will inserts all the markup it needs to present the timeline:
As we will be modifying the CSS of the timeline, the fragment above
will give you a better idea of the customizations. Note that we won’t be
recreating the plugin’s stylesheet from scratch, we will only be
overriding some of the rules in our own css file. This has the benefit
of making future updates to the plugin straightforward, not to mention
that it will be much easier.
Writing the CSS by looking at the markup alone would be a tough undertaking, given that our rules must have precedence over the ones used in timeline.css. Fortunately, there is a much easier way, as you will see in the CSS section of this tutorial.
The init method takes single argument – the data source. It can
either be a json file like above, or a Google spreadsheet (reminiscent
of our Spredsheet Powered FAQ Tutorial).
All the customizations you see below override only a handful of CSS styles. The rest are inherited by the default stylesheet. Let’s begin!
The first thing we will do in styles.css, after styling the page itself, is to change the backgrounds of the timeline:
To create the 3D effect of the timeline navigation, we will need to
use additional elements. But the Timeline plugin doesn’t include such in
its markup. An easy solution is to use :before / :after pseudo elements. The :after element is the darker top part and it uses a linear gradient to enhance the effect.
Then we add a dark background to the timeline navigation (the section
with the small clickable tooltips that represent the events):
Later we style the zoom-in / zoom-out buttons and toolbar:
The numeric scale at the bottom comes next:
The previous and next arrows:
The loading screen:
Then we move on to the slides:
Finally, we will customize the appearance of the front page. I am using nth-child(1)
to target only the first slider-item, which contains the name and
description of the timeline which have been defined in the JSON data
source.
The only thing left is to open up timeline.psd that is
bundled with the download of the plugin, and change the color of some of
the icons in photoshop. I have included the necessary files in the zip
download for this tutorial. With this our timeline portfolio is
complete!
The HTML
Timeline comes with a light colored theme by default. It is perfectly usable and in most cases would be exactly what you need. However, for our portfolio, a dark design would be a better fit, so we will customize it to our liking.First, let’s look at the basic layout of the page:
index.html
01 | <!DOCTYPE html> |
02 | <html> |
03 | <head> |
04 | <meta charset="utf-8" /> |
05 | <title>Timeline Portfolio | Tutorialzine Demo</title> |
06 |
07 | <!-- The default timeline stylesheet --> |
08 | <link rel="stylesheet" href="assets/css/timeline.css" /> |
09 | <!-- Our customizations to the theme --> |
10 | <link rel="stylesheet" href="assets/css/styles.css" /> |
11 |
12 | <!-- Google Fonts --> |
13 | <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script|Antic+Slab" /> |
14 |
15 | <!--[if lt IE 9]> |
16 | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
17 | <![endif]--> |
18 | </head> |
19 |
20 | <body> |
21 |
22 | <div id="timeline"> |
23 | <!-- Timeline will generate additional markup here --> |
24 | </div> |
25 |
26 | <!-- JavaScript includes - jQuery, turn.js and our own script.js --> |
27 | <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> |
28 | <script src="assets/js/timeline-min.js"></script> |
29 | <script src="assets/js/script.js"></script> |
30 |
31 | </body> |
32 | </html> |
When we call the plugin, it will search for a div on your page with the ID of timeline. Inside it, it will inserts all the markup it needs to present the timeline:
01 | <div class="container main" id="timeline"> |
02 | <div class="feature slider" style="overflow-y: hidden;"> |
03 | <div class="slider-container-mask slider-container slider-item-container"> |
04 |
05 | <!-- The divs below are the events of the timeline --> |
06 |
07 | <div class="slider-item content"> |
08 | <div class="text container"> |
09 |
10 | <h2 class="start">Johnny B Goode</h2> |
11 | <p><em><span class="c1">Designer</span> & <span class= |
12 | "c2">Developer</span></em></p> |
13 |
14 | </div> |
15 |
16 | <div class="media media-wrapper media-container"> |
17 | <!-- Images or other media go here --> |
18 | </div> |
19 | </div> |
20 |
21 | <div class="slider-item content content-container"> |
22 | <div class="text container"> |
23 |
24 | <h2 class="date">March 2009</h2> |
25 | <h3>My first experiment in time-lapse photography</h3> |
26 | <p>Nature at its finest in this video.</p> |
27 |
28 | </div> |
29 |
30 | <div class="media media-wrapper media-container"> |
31 | <!-- Images or other media go here --> |
32 | </div> |
33 | </div> |
34 |
35 | <!-- More items go here --> |
36 | </div> |
37 |
38 | <!-- Next arrow --> |
39 | <div class="nav-next nav-container"> |
40 | <div class="icon"></div> |
41 | <div class="date">March 2010</div> |
42 | <div class="title">Logo Design for a pet shop</div> |
43 | </div> |
44 |
45 | <!-- Previous arrow --> |
46 | <div class="nav-previous nav-container"> |
47 | <div class="icon"></div> |
48 | <div class="date">July 2009</div> |
49 | <div class="title">Another time-lapse experiment</div> |
50 | </div> |
51 | </div> |
52 |
53 | <div class="navigation"> |
54 |
55 | <!-- The navigation items go here (the tooltips in the bottom) |
56 | one for each of the events --> |
57 |
58 | <div class="time"> |
59 | <!-- The timeline numbers go here --> |
60 | </div> |
61 | </div> |
62 |
63 | <div class="timenav-background"> |
64 | <div class="timenav-line" style="left: 633px;"></div> |
65 |
66 | <div class="timenav-interval-background top-highlight"></div> |
67 | </div> |
68 |
69 | <div class="toolbar" style="top: 27px;"> |
70 | <div class="back-home icon" title="Return to Title"></div> |
71 | <div class="zoom-in icon" title="Expand Timeline"></div> |
72 | <div class="zoom-out icon" data-original-title="Contract Timeline"></div> |
73 | </div> |
74 | </div> |
75 | </div> |
Timeline Portfolio with jQuery
The jQuery
To initialize the plugin, we need to call the VMM.Timeline() method on document ready:1 | $(function(){ |
2 |
3 | var timeline = new VMM.Timeline(); |
4 | timeline.init("data.json"); |
5 |
6 | }); |
For more information on the supported data sources, see the documentation on the plugin’s site, or browse the data.json file in the zip download for this tutorial.
The CSS
I used Firebug’s HTML Inspector to get the right selectors for the elements that we are about to customize. In the HTML tab, it is easy to see what rules have been applied to each element by timeline.css. To override them, I copied the same selectors to styles.css which is where our modifications will take place. On several occurrences, however, I have used the !important flag to make my work easier.All the customizations you see below override only a handful of CSS styles. The rest are inherited by the default stylesheet. Let’s begin!
The first thing we will do in styles.css, after styling the page itself, is to change the backgrounds of the timeline:
01 | #timeline{ |
02 | background:none; |
03 | } |
04 |
05 | /* The individual events in the slider */ |
06 | .slider .slider-container-mask .slider-container{ |
07 | background:none; |
08 | } |
09 |
10 | /* Setting a custom background image */ |
11 | #timeline div.navigation{ |
12 | background: url('../img/timeline_bg.jpg') repeat; |
13 | border-top:none; |
14 | } |
Timeline Navigation with a CSS 3D Effect
01 | #timeline div.navigation:before{ |
02 | position:absolute; |
03 | content:''; |
04 | height:40px; |
05 | width:100%; |
06 | left:0; |
07 | top:-40px; |
08 | background: url('../img/timeline_bg.jpg') repeat; |
09 | } |
10 |
11 | #timeline div.navigation:after{ |
12 | position:absolute; |
13 | content:''; |
14 | height:10px; |
15 | width:100%; |
16 | left:0; |
17 | top:-40px; |
18 | background:repeat-x; |
19 |
20 | background-image: linear-gradient(bottom, #434446 0%, #363839 100%); |
21 | background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%); |
22 | background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%); |
23 | background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%); |
24 | background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%); |
25 | } |
01 | #timeline div.timenav-background{ |
02 | background-color:rgba(0,0,0,0.4) !important; |
03 |
04 | } |
05 |
06 | #timeline .navigation .timenav-background .timenav-interval-background{ |
07 | background:none; |
08 | } |
09 |
10 | #timeline .top-highlight{ |
11 | background-color:transparent !important; |
12 | } |
1 | #timeline .toolbar{ |
2 | border:none !important; |
3 | background-color: #202222 !important; |
4 | } |
5 |
6 | #timeline .toolbar div{ |
7 | border:none !important; |
8 | } |
1 | #timeline .navigation .timenav .time .time-interval-minor .minor{ |
2 | margin-left:-1px; |
3 | } |
4 |
5 | #timeline .navigation .timenav .time .time-interval div{ |
6 | color: #CCCCCC; |
7 | } |
01 | .slider .nav-previous .icon { |
02 | background: url("timeline.png") no-repeat scroll 0 -293px transparent; |
03 | } |
04 |
05 | .slider .nav-previous,.slider .nav-next{ |
06 | font-family:'Segoe UI',sans-serif; |
07 | } |
08 |
09 | .slider .nav-next .icon { |
10 | background: url("timeline.png") no-repeat scroll 72px -221px transparent; |
11 | width: 70px !important; |
12 | } |
13 |
14 | .slider .nav-next:hover .icon{ |
15 | position:relative; |
16 | right:-5px; |
17 | } |
18 |
19 | .slider .nav-previous:hover, .slider .nav-next:hover { |
20 | color: #666; |
21 | cursor: pointer; |
22 | } |
23 |
24 | #timeline .thumbnail { |
25 | border: medium none; |
26 | } |
01 | #timeline .feedback { |
02 | background-color: #222222; |
03 | box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset; |
04 | border:none; |
05 | } |
06 |
07 | #timeline .feedback div{ |
08 | color: #AAAAAA; |
09 | font-size: 14px !important; |
10 | font-weight: normal; |
11 | } |
01 | #timeline .slider-item h2, |
02 | #timeline .slider-item h3{ |
03 | font-family:'Antic Slab','Segoe UI',sans-serif; |
04 | } |
05 |
06 | #timeline .slider-item h2{ |
07 | color:#fff; |
08 | } |
09 |
10 | #timeline .slider-item p{ |
11 | font-family:'Segoe UI',sans-serif; |
12 | } |
13 |
14 | #timeline .slider-item img, |
15 | #timeline .slider-item iframe{ |
16 | border:none; |
17 | } |
01 | /* Customizing the first slide - the cover */ |
02 |
03 | #timeline .slider-item:nth-child(1) h2{ |
04 | font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif; |
05 | background:rgba(0,0,0,0.3); |
06 | white-space: nowrap; |
07 | padding:10px 5px 5px 20px; |
08 | position:relative; |
09 | right:-60px; |
10 | z-index:10; |
11 | } |
12 |
13 | #timeline .slider-item:nth-child(1) p i{ |
14 | font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif; |
15 | background:rgba(0,0,0,0.3); |
16 | white-space: nowrap; |
17 | padding:5px 20px; |
18 | position:relative; |
19 | right:-60px; |
20 | z-index:10; |
21 | } |
22 |
23 | #timeline .slider-item:nth-child(1) p .c1{ |
24 | color:#1bdff0; |
25 | } |
26 |
27 | #timeline .slider-item:nth-child(1) p .c2{ |
28 | color:#c92fe6; |
29 | } |
30 |
31 | #timeline .slider-item:nth-child(1) .media-container { |
32 | left: -30px; |
33 | position: relative; |
34 | z-index: 1; |
35 | } |
36 |
37 | #timeline .slider-item:nth-child(1) .credit{ |
38 | text-align: center; |
39 | } |
0 nhận xét:
Đăng nhận xét