In this article, we will create super cool timeline with cufon, animate.css and timelinr. you may see demos below:
Things we need:
In this article, we need to rewrite the jquery timelinr to add more effect and beautify it with cufon and anmimate.css, and we will use fixie.js to create all images we need.
HTML code:
  1. <div id="timeline">
  2. <ul id="dates">
  3. <li><a href="#2001">2001</a></li>
  4. <li><a href="#2002">2002</a></li>
  5. <li><a href="#2003">2003</a></li>
  6. <li><a href="#2004">2004</a></li>
  7. <li><a href="#2005">2005</a></li>
  8. <li><a href="#2006">2006</a></li>
  9. <li><a href="#2007">2007</a></li>
  10. </ul>
  11. <ul id="issues">
  12. <li id="2001">
  13. <img class="fixie" width="256" height="256" />
  14. <h1>2001</h1>
  15. <p class="fixie"></p>
  16. </li>
  17. <li id="2002">
  18. <img class="fixie" width="256" height="256" />
  19. <h1>2002</h1>
  20. <p class="fixie"></p>
  21. </li>
  22. <li id="2003">
  23. <img class="fixie" width="256" height="256" />
  24. <h1>2003</h1>
  25. <p class="fixie"></p>
  26. </li>
  27. <li id="2004">
  28. <img class="fixie" width="256" height="256" />
  29. <h1>2004</h1>
  30. <p class="fixie"></p>
  31. </li>
  32. <li id="2005">
  33. <img class="fixie" width="256" height="256" />
  34. <h1>2005</h1>
  35. <p class="fixie"></p>
  36. </li>
  37. <li id="2006">
  38. <img class="fixie" width="256" height="256" />
  39. <h1>2006</h1>
  40. <p class="fixie"></p>
  41. </li>
  42. <li id="2007">
  43. <img class="fixie" width="256" height="256" />
  44. <h1>2007</h1>
  45. <p class="fixie"></p>
  46. </li>
  47. </ul>
  48. <div id="grad_left"></div>
  49. <div id="grad_right"></div>
  50. <a href="#" id="next">+</a>
  51. <a href="#" id="prev">-</a>
  52. </div>


Modified timelinr plugin
  1. jQuery Timelinr GBin1.com
  2. tested with jQuery v1.7+
  3. Free under the MIT license.
  4. http://www.gbin1.com/technology/jquerytutorial/20120813-css-animation-timeline
  5. Fork from: http://www.csslab.cl/2011/08/18/jquery-timelinr/
  6. ---------------------------------- */
  7. jQuery.fn.timelinr = function(options){
  8. // default plugin settings
  9. settings = jQuery.extend({
  10. orientation: 'horizontal', // value: horizontal | vertical, default to horizontal
  11. containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline
  12. datesDiv: '#dates', // value: any HTML tag or #id, default to #dates
  13. datesSelectedClass: 'selected', // value: any class, default to selected
  14. datesSpeed: 'normal', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
  15. issuesDiv: '#issues', // value: any HTML tag or #id, default to #issues
  16. issuesSelectedClass: 'selected', // value: any class, default to selected
  17. issuesSpeed: 'fast', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
  18. issuesTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2
  19. issuesTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal)
  20. prevButton: '#prev', // value: any HTML tag or #id, default to #prev
  21. nextButton: '#next', // value: any HTML tag or #id, default to #next
  22. arrowKeys: 'false', // value: true | false, default to false
  23. startAt: 1, // value: integer, default to 1 (first)
  24. autoPlay: 'false', // value: true | false, default to false
  25. autoPlayDirection: 'forward', // value: forward | backward, default to forward
  26. autoPlayPause: 2000, // value: integer (1000 = 1 seg), default to 2000 (2segs)
  27. cssAnimation: 'lightSpeedIn'
  28. }, options);
  29. $(function(){
  30. // setting variables... many of them
  31. var howManyDates = $(settings.datesDiv+' li').length;
  32. var howManyIssues = $(settings.issuesDiv+' li').length;
  33. var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
  34. var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
  35. var widthContainer = $(settings.containerDiv).width();
  36. var heightContainer = $(settings.containerDiv).height();
  37. var widthIssues = $(settings.issuesDiv).width();
  38. var heightIssues = $(settings.issuesDiv).height();
  39. var widthIssue = $(settings.issuesDiv+' li').width();
  40. var heightIssue = $(settings.issuesDiv+' li').height();
  41. var widthDates = $(settings.datesDiv).width();
  42. var heightDates = $(settings.datesDiv).height();
  43. var widthDate = $(settings.datesDiv+' li').width();
  44. var heightDate = $(settings.datesDiv+' li').height();
  45. var cssAnimation = settings.cssAnimation;
  46. // set positions!
  47. if(settings.orientation == 'horizontal') {
  48. $(settings.issuesDiv).width(widthIssue*howManyIssues);
  49. $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
  50. var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
  51. } else if(settings.orientation == 'vertical') {
  52. $(settings.issuesDiv).height(heightIssue*howManyIssues);
  53. $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
  54. var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
  55. }
  56. $(settings.datesDiv+' a').click(function(event){
  57. event.preventDefault();
  58. // first vars
  59. var whichIssue = $(this).text();
  60. var currentIndex = $(this).parent().prevAll().length;
  61. // moving the elements
  62. if(settings.orientation == 'horizontal') {
  63. $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
  64. } else if(settings.orientation == 'vertical') {
  65. $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
  66. }
  67. //$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
  68. $(settings.issuesDiv+' li').addClass('animated ' + cssAnimation).delay(1000).queue(function(next){
  69. $(this).removeClass('animated ' + cssAnimation);
  70. next();
  71. });
  72. // now moving the dates
  73. $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
  74. $(this).addClass(settings.datesSelectedClass).delay(500).queue(function(next){
  75. Cufon.refresh();
  76. next();
  77. });
  78. if(settings.orientation == 'horizontal') {
  79. $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
  80. } else if(settings.orientation == 'vertical') {
  81. $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
  82. }
  83. });
  84. $(settings.nextButton).bind('click', function(event){
  85. event.preventDefault();
  86. if(settings.orientation == 'horizontal') {
  87. var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
  88. var currentIssueIndex = currentPositionIssues/widthIssue;
  89. var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
  90. var currentIssueDate = currentPositionDates-widthDate;
  91. if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) {
  92. $(settings.issuesDiv).stop();
  93. $(settings.datesDiv+' li:last-child a').click();
  94. } else {
  95. if (!$(settings.issuesDiv).is(':animated')) {
  96. $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues-widthIssue},{queue:false, duration:settings.issuesSpeed});
  97. //$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
  98. $(settings.issuesDiv+' li').addClass('animated ' + cssAnimation).delay(1000).queue(function(next){
  99. $(this).removeClass('animated ' + cssAnimation);
  100. next();
  101. });
  102. $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'});
  103. $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass).delay(500).queue( function(next){
  104. next();
  105. Cufon.refresh();
  106. });
  107. }
  108. }
  109. } else if(settings.orientation == 'vertical') {
  110. var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
  111. var currentIssueIndex = currentPositionIssues/heightIssue;
  112. var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
  113. var currentIssueDate = currentPositionDates-heightDate;
  114. if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) {
  115. $(settings.issuesDiv).stop();
  116. $(settings.datesDiv+' li:last-child a').click();
  117. } else {
  118. if (!$(settings.issuesDiv).is(':animated')) {
  119. $(settings.issuesDiv).animate({'marginTop':currentPositionIssues-heightIssue},{queue:false, duration:settings.issuesSpeed});
  120. //$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
  121. //$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
  122. $(settings.issuesDiv+' li').addClass('animated ' + cssAnimation).delay(1000).queue(function(next){
  123. $(this).removeClass('animated ' + cssAnimation);
  124. next();
  125. });
  126. $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'});
  127. $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass).delay(500).queue(
  128. function(next){
  129. next();
  130. Cufon.refresh();
  131. });
  132. }
  133. }
  134. }
  135. });
  136. $(settings.prevButton).click(function(event){
  137. event.preventDefault();
  138. if(settings.orientation == 'horizontal') {
  139. var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
  140. var currentIssueIndex = currentPositionIssues/widthIssue;
  141. var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
  142. var currentIssueDate = currentPositionDates+widthDate;
  143. if(currentPositionIssues >= 0) {
  144. $(settings.issuesDiv).stop();
  145. $(settings.datesDiv+' li:first-child a').click();
  146. } else {
  147. if (!$(settings.issuesDiv).is(':animated')) {
  148. $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues+widthIssue},{queue:false, duration:settings.issuesSpeed});
  149. $(settings.issuesDiv+' li').addClass('animated ' + cssAnimation).delay(1000).queue(function(next){
  150. $(this).removeClass('animated ' + cssAnimation);
  151. next();
  152. });
  153. //$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
  154. //$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
  155. $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'});
  156. $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass).delay(500).queue( function(next){
  157. next();
  158. Cufon.refresh();
  159. });
  160. }
  161. }
  162. } else if(settings.orientation == 'vertical') {
  163. var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
  164. var currentIssueIndex = currentPositionIssues/heightIssue;
  165. var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
  166. var currentIssueDate = currentPositionDates+heightDate;
  167. if(currentPositionIssues >= 0) {
  168. $(settings.issuesDiv).stop();
  169. $(settings.datesDiv+' li:first-child a').click();
  170. } else {
  171. if (!$(settings.issuesDiv).is(':animated')) {
  172. $(settings.issuesDiv).animate({'marginTop':currentPositionIssues+heightIssue},{queue:false, duration:settings.issuesSpeed});
  173. $(settings.issuesDiv+' li').addClass('animated ' + cssAnimation).delay(1000).queue(function(next){
  174. $(this).removeClass('animated ' + cssAnimation);
  175. next();
  176. });
  177. //$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
  178. //$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
  179. $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'},{queue:false, duration:settings.issuesSpeed});
  180. $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass).delay(500).queue(
  181. function(next){
  182. next();
  183. Cufon.refresh();
  184. });
  185. }
  186. }
  187. }
  188. });
  189. // keyboard navigation, added since 0.9.1
  190. if(settings.arrowKeys=='true') {
  191. if(settings.orientation=='horizontal') {
  192. $(document).keydown(function(event){
  193. if (event.keyCode == 39) {
  194. $(settings.nextButton).click();
  195. }
  196. if (event.keyCode == 37) {
  197. $(settings.prevButton).click();
  198. }
  199. });
  200. } else if(settings.orientation=='vertical') {
  201. $(document).keydown(function(event){
  202. if (event.keyCode == 40) {
  203. $(settings.nextButton).click();
  204. }
  205. if (event.keyCode == 38) {
  206. $(settings.prevButton).click();
  207. }
  208. });
  209. }
  210. }
  211. // default position startAt, added since 0.9.3
  212. $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
  213. // autoPlay, added since 0.9.4
  214. if(settings.autoPlay == 'true') {
  215. setInterval("autoPlay()", settings.autoPlayPause);
  216. }
  217. });
  218. };
  219. // autoPlay, added since 0.9.4
  220. function autoPlay(){
  221. var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
  222. if(settings.autoPlayDirection == 'forward') {
  223. if(currentDate.parent().is('li:last-child')) {
  224. $(settings.datesDiv+' li:first-child').find('a').trigger('click');
  225. } else {
  226. currentDate.parent().next().find('a').trigger('click');
  227. }
  228. } else if(settings.autoPlayDirection == 'backward') {
  229. if(currentDate.parent().is('li:first-child')) {
  230. $(settings.datesDiv+' li:last-child').find('a').trigger('click');
  231. } else {
  232. currentDate.parent().prev().find('a').trigger('click');
  233. }
  234. }
  235. }


javascript we used in these demo
  1. $(function(){
  2. Cufon.replace('#timeline a, #timeline h1').CSS.ready(function() {
  3. $().timelinr({autoPlay:'true', autoPlayPause:'3000', cssAnimation:'tada'});
  4. });
  5. });


Hope you will like it. thanks!