Join Chris Converse for an in-depth discussion in this video Adding content to the HTML, part of Creating an Interactive Animated Timeline with jQuery.
Now we're going to start adding some of the content to our HTML.…So inside of the index.html file. Let's get the cursor after the panel…container beginning dip tag. Let's hit return.…Let's start with an H1 tag. Let's just type the internet.…Next let's get the cursor in between the beginning and ending div tags for…background slider. Let's hit a return to open that up.…Inside here we're going to add an image tag.…So we're going to start with beginning tag img class=background.…
Then the source attribute. Set that equal to images/background.jpg.…Another attribute for width. Set that to 1500 and a height to 300.…Then end the tag. Now with our background image in place,…let's get our cursor in between the beginning and ending div tags for the…class of panel slider. Let's hit a few returns.…And inside of here is where we're going to put all of the individual panels for our timeline.…So I'm going to start by putting an HTML comment just called panel.…
Next line we'll add a div with a class of panel.…Then inside there, we'll add another div, with a class of panel_content.…
- 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 Advanced
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.