From the course: Creating a Responsive Web Experience

Unlock this course with a free trial

Join today to access over 22,500 courses taught by industry experts.

Animating the hero elements

Animating the hero elements

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…

Contents