Creating an Interactive Animated Timeline with jQuery

Learn to create an engaging, interactive, and animated timeline with HTML and jQuery.

Introduction

• Welcome
• Using the exercise files
• For those using Dreamweaver

1. Creating the Web Graphics and HTML Content

• Saving web graphics from Photoshop
• Linking CSS and JavaScript files to your HTML file
• Creating the main HTML containers
• Adding content to the HTML

2. Adding CSS Styles for Layout and Positioning

• Styling the main timeline container and heading
• Creating a gradient background for the panel container
• Styles for the sliders
• Styles for the panel content

3. Finalizing Layout and Animating Panels with jQuery

• Adjusting the layout with jQuery
• Generating the navigation based on the HTML
• Positioning and styling the navigation
• Activating the navigation to animate the panels
• Animating the background

4. Making the Design Responsive

• Adding CSS styles for the panel images
• Creating a CSS media query for small screens
• Hiding elements on small screens

5. Adding an Autostart and Screen Size Detection

• Setting the timeline to autostart on a panel
• Detecting the screen size for a responsive layout
• Optimizing CSS for IE 7 and 8

Conclusion

• Where to go from here