Best jQuery Timeline Plugins & Tutorials with Demo

    Timeline : jQuery Storytelling Tool with Demo

    Timeline : jQuery Storytelling Tool with Demo

    Timeline is a JavaScript-powered tool for creating interactive storytelling timelines where a timeline works in parallel with a content slider.Users can choose to browse the contents either by clicking the items in the timeline or by navigating through the content slider where both stays synchronized all the time.

    Timeline is great for pulling in media from different sources. Just throw in a link from Twitter, YouTube, Flickr, Vimeo, Google Maps or SoundCloud and Timeline will format it to fit perfectly. More media types will be supported in the future.

    Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.

    Simile Widgets : JavaScript Interactive Timeline

    Simile Widgets : JavaScript Interactive Timeline

    Timeline is a JavaScript widget for creating interactive timelines. You can scroll through items featured in chronological order by using your mousewheel or by holding down your mouse button on the timeline and dragging left or right. Clicking on a dot, which represents an item in the time line, will reveal more information. Timeline is open source, released under the BSD license.

    Facebook Timeline Design using JQuery and CSS

    Facebook Timeline Design using JQuery and CSS

    I’m going to discuss about Jquery usage. Facebook timeline design makes big revolution in social networking world and it gives new feel to the user profile pages. In this post I want to explain how simple I had implemented this design with Jquery and CSS. Try this demo with modern browsers like Chrome, Firefox and Safari (IE is dead).

    Lateral On-Scroll Sliding with jQuery

    jQuery On-Scroll Sliding

    After getting the request, we are going to show you how to create a “slide-in on scroll” jQuery effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.

    The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. We’ll be alternating the sides to create a random look.

    jQuery Timelinr

    jQuery Timelinr slider

    This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can parameterize the majority of attributes: speed, transparency, etc..

    Timeglider – Impressive jQuery Plugin For Data-Driven Timelines

    Timeglider – Impressive jQuery Plugin For Data-Driven Timelines

    Timeglider is a jQuery plugin for displaying any number of events in a highly-flexible timeline.

    Its interface has support for zooming in/out (mouse wheel can be used too) and panning where you can quickly navigate through the time and find events.

    Events are clickable and can display a detailed view of them inside a modal box.