Create an Interactive Animated Timeline with jQuery

with Chris Converse
please wait ...
Create an Interactive Animated Timeline with jQuery
Video duration: 0s 1h 7m Intermediate


Learn to create an engaging, interactive, and animated timeline with jQuery. In this course, Chris Converse shows you how to create a sliding timeline, with date markers and associated content. Tell your story, or that of your organization, with a graphically rich, interactive timeline.

Topics include:
  • Preparing the artwork
  • Setting up the project files
  • Creating the HTML containers
  • Adding content into the HTML containers
  • Styling the timeline with CSS
  • Adding jQuery to your project
  • Adjusting the layout with jQuery
  • Adding navigation elements
  • Animating the content based on navigation
  • Adding autostart and screen size detection features
Developer Web


- [Voiceover] Hi, I'm Chris Converse, and in this course we're going to create an interactive animated timeline using HTML, CSS, and JavaScript. So, what we're going to do is set it up so that when you click navigation items, we're gonna take some timeline panels and just move them across the stage, centering them with the center of the browser. We're also going to have a background graphic that's going to give us a nice theme for our timeline, but it's gonna animate at a different speed. We're also going to set in some responsive design techniques. So, as we change the size of the browser, re-click our navigation items, the content will always readjust itself based on the size of the browser.

And if we move our browser down to be under 500 pixels, we'll change the design completely, so that it's optimized for small screen devices. So, on a small screen device, we can scroll through the different content. We'll turn off the larger background graphic and the navigation items, and even set the design up to be liquid under 500 pixels. So, based on the orientation, we still see the content fitting to the screen. We'll also be adding in a few additional features, such as the ability to start on any particular panel. And we'll even add in a JavaScript and some CSS for IE 7 and 8, so you can use this timeline with those browsers as well.

So, I hope this course sounds interesting to you, and if so, let's get started.

please wait ...