<div id="ss-container" class="ss-container"><div class="ss-row"><div class="ss-left"><h2 id="november">November</h2></div><div class="ss-right"><h2>2011</h2></div></div><div class="ss-row ss-medium"><div class="ss-left"><a href="#" class="ss-circle ss-circle-1">Some title</a></div><div class="ss-right"><h3><span>November 28, 2011</span><a href="#">Some Title</a></h3></div></div><div class="ss-row ss-large"> // ss-row ss-small...</div><!-- more rows... -->
</div>

.ss-container{width: 100%;   position: relative;  text-align: left;  float: left;overflow: hidden;    // don’t show scrollbar on the pagepadding-bottom: 500px;
}
/*create the middle line throughout the container */
.ss-container:before{position: absolute;width: 4px;background: rgba(17,17,22,0.8);top: 0px;left: 50%;     // position in the middle of the containermargin-left: -2px;content: '';height: 100%;
}
.ss-row{ width: 100%;clear: both; float: left; position: relative; padding: 30px 0;}
.ss-left, .ss-right{  float: left;  width: 48%;  position: relative;}
.ss-right{ padding-left: 2%;}
.ss-left{ text-align: right;   float: left;  padding-right: 2%;}
.ss-container h2{ font-size: 40px; text-transform: uppercase; color: rgba(78,84,123,0.2); text-shadow: 0px 1px 1px #fff; padding: 20px 0px;}
.ss-container h3{ margin-top: 34px;padding: 10px 15px;background: rgba(26, 27, 33, 0.6); text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)}/* create a circle, set the border radius of the anchor to 50% and add some neat box shadow*/
.ss-circle{border-radius: 50%;overflow: hidden;display: block;text-indent: -9000px;text-align: left;box-shadow:0px 2px 5px rgba(0,0,0,0.7) inset,0px 0px 0px 12px rgba(61,64,85,0.3);background-size: cover;background-color: #f0f0f0;background-repeat: no-repeat;background-position: center center;
}
/*three different circle sizes*/
.ss-small .ss-circle{ width: 100px; height: 100px;}
.ss-medium .ss-circle{ width: 200px; height: 200px;}
.ss-large .ss-circle{ width: 300px;height: 300px;}
.ss-left .ss-circle{ float: right; margin-right: 30%;}
.ss-right .ss-circle{ float: left; margin-left: 30%;}/*the line and the arrow that will point to the middle line*/
.ss-circle-deco:before{width: 29%;height: 0px;border-bottom: 5px dotted #ddd;border-bottom: 5px dotted rgba(17, 17, 22, 0.3);box-shadow: 0px 1px 1px #fff;position: absolute;top: 50%;content: '';margin-top: -3px;
}
.ss-left .ss-circle-deco:before{ right: 2%;  }
.ss-right .ss-circle-deco:before{ left: 2%;  }
/* little arrow will be created by the border style and depending on if it’s a child of the left or right side*/
.ss-circle-deco:after{width: 0px;height: 0px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;content: '';position: absolute;top: 50%;margin-top: -10px;
}
.ss-left .ss-circle-deco:after{ right: 0; border-right: 10px solid rgba(17,17,22,0.8);}
.ss-right .ss-circle-deco:after{ left: 0;border-left: 10px solid rgba(17,17,22,0.8);}
/*adjust the position of the headings on the other side according to circle sizes*/
.ss-container .ss-medium h3{ margin-top: 82px;}
.ss-container .ss-large h3{ margin-top: 133px;}
.ss-container .ss-left h3{ border-right: 5px solid rgba(164,166,181,0.8);}
.ss-container .ss-right h3{ border-left: 5px solid rgba(164,166,181,0.8);}/*others*/
.ss-container h3 span{ color: rgba(255,255,255,0.8); font-size: 13px;display: block; padding-bottom: 5px;}
.ss-container h3 a{ font-size: 28px; color: rgba(255,255,255,0.9);display: block;}
.ss-container h3 a:hover{  color: rgba(255,255,255,1);}
/*Each circle is going to have a different background image*/
.ss-circle-1{ background-image:url(../images/1.jpg);}
.ss-circle-2{ background-image: url(../images/2.jpg);}
.ss-circle-3{ background-image: url(../images/3.jpg);}
/* and so on... */

 // the row elements
var $rows = $('#ss-container > div.ss-row'),// we will cache the inviewport// rows and the outside viewport rows
    $rowsViewport, $rowsOutViewport,// navigation menu links$links = $('#ss-links > a'),// the window element$win = $(window),// we will store the window sizes herewinSize = {},// used in the scroll setTimeout functionanim = false,// page scroll speedscollPageSpeed = 2000 ,// page scroll easingscollPageEasing = 'easeInOutExpo',// perspective?hasPerspective = true,perspective = hasPerspective && Modernizr.csstransforms3d,

// initialize function
init  = function() {     // get window sizes
    getWinSize();// initialize events
    initEvents();// define the inviewport selector
    defineViewport();// gets the elements that match the previous selector
    setViewportRows();// if perspective add cssif( perspective ) {$rows.css({'-webkit-perspective'       : 600,'-webkit-perspective-origin'    : '50% 0%'});            }// show the pointers for the inviewport rows$rowsViewport.find('a.ss-circle').addClass('ss-circle-deco');// set positions for each row
    placeRows();
},

/*defines a selector that gathers the row elements that are initially visible. An element is visible if its top is less than the window’s height. These elements will not be affected when scrolling the page*/
defineViewport  = function() { $.extend( $.expr[':'], {     inviewport  : function ( el ) {if ( $(el).offset().top < winSize.height ) {return true;}return false;}     });
},
/*checks which rows are initially visible*/
setViewportRows = function() {     $rowsViewport = $rows.filter(':inviewport');$rowsOutViewport = $rows.not( $rowsViewport )
},
/*gets the window width and height*/
getWinSize = function() { winSize.width   = $win.width();winSize.height  = $win.height();
},

initEvents  = function() {     // navigation menu links.// scroll to the respective section.$links.on( 'click.Scrolling', function( event ) {         // scroll to the element that has id = menu's href$('html, body').stop().animate({scrollTop: $( $(this).attr('href') ).offset().top}, scollPageSpeed, scollPageEasing );         return false;     });$(window).on({// on window resize we need to redefine// which rows are initially visible// (this ones we will not animate).'resize.Scrolling' : function( event ) {             // get the window sizes again
            getWinSize();// redefine which rows are initially// visible (:inviewport)
            setViewportRows();// remove pointers for every row$rows.find('a.ss-circle').removeClass('ss-circle-deco');// show inviewport rows and respective pointers$rowsViewport.each( function() {             $(this).find('div.ss-left').css({ left   : '0%' }).end().find('div.ss-right').css({ right  : '0%' }).end().find('a.ss-circle').addClass('ss-circle-deco');             });         },// when scrolling the page change// the position of each row'scroll.Scrolling' : function( event ) {             // set a timeout to avoid that the// placeRows function gets called on// every scroll triggerif( anim ) return false;anim = true;setTimeout( function() {                 placeRows();anim = false;                 }, 10 );         }});
},

placeRows  = function() {     // how much we scrolled so farvar winscroll   = $win.scrollTop(),// the y value for the center of the screenwinCenter   = winSize.height / 2 + winscroll;     // for every row that is not inviewport$rowsOutViewport.each( function(i) {         var $row    = $(this),// the left side element$rowL   = $row.find('div.ss-left'),// the right side element$rowR   = $row.find('div.ss-right'),// top valuerowT    = $row.offset().top;         // hide the row if it is under the viewportif( rowT > winSize.height + winscroll ) { if( perspective ) { $rowL.css({'-webkit-transform' : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)','opacity'           : 0});$rowR.css({'-webkit-transform' : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)','opacity'           : 0}); }else { $rowL.css({ left        : '-50%' });$rowR.css({ right       : '-50%' }); } }// if not, the row should become visible// (0% of left/right) as it gets closer to// the center of the screen.else {                 // row's heightvar rowH    = $row.height(),// the value on each scrolling step// will be proporcional to the distance// from the center of the screen to its heightfactor  = ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ),// value for the left / right of each side of the row.// 0% is the limitval     = Math.max( factor * 50, 0 );                 if( val <= 0 ) {             // when 0% is reached show the pointer for that rowif( !$row.data('pointer') ) {                 $row.data( 'pointer', true );$row.find('.ss-circle').addClass('ss-circle-deco');                 }             }else {                 // the pointer should not be shownif( $row.data('pointer') ) {                     $row.data( 'pointer', false );$row.find('.ss-circle').removeClass('ss-circle-deco');                 }             }             // set calculated valuesif( perspective ) { var t = Math.max( factor * 75, 0 ),r = Math.max( factor * 90, 0 ),o = Math.min( Math.abs( factor - 1 ), 1 ); $rowL.css({'-webkit-transform' : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)','opacity'           : o});$rowR.css({'-webkit-transform' : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)','opacity'       : o}); }else { $rowL.css({ left    : - val + '%' });$rowR.css({ right   : - val + '%' });        }             }       });
};
return { init : init };

<div id="timelineContainer" class="timelineContainer"><div class="timelineMajor"><h2 class="timelineMajorMarker">Major Marker</h2><!-- marker --><dl class="timelineMinor"> <!--Separate the individual events (e.g., content for each century, year, decade etc) into elements--><dt id="event01"><a>Event</a></dt><dd class="timelineEvent" id="event01EX" style="display: none; "><p>Content about the event goes here.</p></dd><!-- /.timelineEvent --></dl><!-- /.timelineMinor --><dl class="timelineMinor"><dt id="event02"><a>Another Event</a></dt><dd class="timelineEvent" id="event02EX" style="display: none; "><p>Content about the other event.</p></dd><!-- /.timelineEvent --></dl><!-- /.timelineMinor --></div><!-- /.timelineMajor -->
</div><!-- /#timelineContainer -->