Join Chris Converse for an in-depth discussion in this video Animating the hero elements, part of Creating a Responsive Web Experience.
Now to animate elements inside of the hero…area, the first thing we're going to do is take…the image and move it off to the right a little bit, set the opacity to zero.…And then take the caption and move it off to the left, set its opacity down to zero.…And then animate them in toward the center.…So let's come back over to our Text editor.…Inside of our design.js file.…Inside of our image pre-load, call back function…where we put in our alert, let's delete this.…Let's come in here and open up this call back function.…So, the first thing we're going to do is…search for the image inside of the hero area.…
So start with a dollar sign, parentheses, tick marks first string literal.…Pound sign hero, space.panel, space image.…Once we find the image, we're going to set some CSS properties.…So.css, beginning and ending parenthesis.…After we…set some CSS properties, we're going to…animate this, so we're going to type .animates.…Another set of parentheses, semicolon.…Now let's come back inside of the parentheses for CSS.…
- Modifying the graphics
- Adjusting the CSS for the navigation
- Loading content with jQuery
- Loading alternate content based on screen size
- Animating the hero panel
- Maintaining support for Internet Explorer 7 and 8
Skill Level Advanced
Q: I don’t see the original course in which this course is based. Where is the final project to the previous course?
A: The exercise files, both premium and free versions, now contain a copy of the previous course’s final project.