MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Create an Interactive Animated Timeline with jQuery

Course Summary

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

  • +

    Course Syllabus

       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
       Where to go from here


Course Fee:
USD 25

Course Type:


Course Status:



2 - 3 hours / week

This course is listed under Development & Implementations Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top