Post
Ask Question

Create super cool timeline with jQuery plugin timelinr, cufon and anmiate.css

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!
Next Recommended Reading Create Dynamic Tabs Using Jquery And CSS