Join Chris Converse for an in-depth discussion in this video Animating the background, part of Creating an Interactive Animated Timeline with jQuery.
Now to animate the background graphic, we're going to add some additional…instructions inside of the navigation on-click event.…So after we animate the panel slider, let's add a few lines.…Let's create a new variable. We're going to call this backgroundwidth.…We're going to set this equal to, so we're going to search and find the size of that…background graphic. So $(.timeline .background_slider img).…So, we're searching for the image inside of the background slider div and then .width.…
Next variable, we're going to define the move amount.…We're going to set the move amount equal to the backgroundWidth minus the timelineWidth.…We want to calculate that first, so let's put those inside of parenthesis.…And then we're going to divide that by the total panels, then a semi colon.…So we're basically doing here, is we're taking the width of the timeline and then…we're taking the width of the overall background graphic, finding out what the…difference is, which is 600 pixels divided by the number of panels.…
- 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
Skill Level Intermediate
1. Creating the Web Graphics and HTML Content
Adding content to the HTML3m 15s
2. Adding CSS Styles for Layout and Positioning
3. Finalizing Layout and Animating Panels with jQuery
Animating the background4m 24s
4. Making the Design Responsive
5. Adding an Autostart and Screen Size Detection
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.