Animated Banner Tutorial Part 2

This is part 2, if you are looking for part 1, it is here.

Sliding Reveal

Open banner-done.html and drag the playhead slider over until you see the white rectangle slide out from underneath the diagonal gray band.

wordpress8

To get all this to work we have to configure and style half a dozen different elements that currently don’t exist. The white rectangle (called #potato) with rounded corners is fairly obvious. But getting it to slide out from underneath a slanted rectangle (called #trapazoid2) means there has to be a slanted rectangle, and the rectangle has to exist on a higher level or layer (called z-index in CSS) than the white rectangle. And the slanted rectangle has to be big enough to cover the white rectangle, while simultaneously the white rectangle has to be wider than the slanted rectangle after it slides into view. It’s a lot to think about, but we will tackle it in stages.

STEP ONE: Lets get the trapazoid2 and potato in place. Open banner-start.html and add two new elements called trapazoid2 and potato. It is lines 14 & 15 below:

STEP TWO: On banner-start.css, add these two new rules below the other rules. Save your changes to both the html and css and view the animation.

This is what you will see after it has finished running:

wordpress9The style sheet is telling trapazoid2 to be temporarily red and transparent. This allows us to see the potato underneath it for testing. The potato has also been transformed horizontally (but not vertically) transform: scale(0.5,1); to half it’s normal width. This allows it to hide under the smaller trapazoid2 until it is needed.

To generate the transform properties, this website has a cool interactive code generator:

http://www.css3maker.com/css3-transform.html

STEP THREE: To make this project easier to understand, I’ve built a pdf that shows something close to what could be called storyboards. Open this pdf. I’m also embedding it in this site, but the pdf has better image quality.

wordpress-10

The first time I taught this lesson to my students I had not built this storyboard. To say they were confused is an understatement. The most important thing to study here is the z-index settings for all the stacked up elements. Keep in mind that you can only apply z-index to an element that has been positioned, as in position: absolute, relative, fixed, etc.

STEP FOUR: Open banner-start.js and add this new line of code to the bottom (line 11). It will animate the #potato over into place. It works by scaling up the width to 100% and changing it’s location to an x value of 330: x:330, scaleX:1. To return to the lipstick analogy, the lipstick just moved out of the tube and is ready to use.

wordpress11

STEP FIVE: Now that we know our #potato is hiding and animating correctly, lets make the #trapazoid2 element fully opaque, and set it’s background color to the same as the #banner. We want it there to hide the #potato, but it should blend into the background…like a flesh colored bandaid over a blemish. Open banner-start.css and modify theĀ  opacity and background-color settings. Also, add a rule that gives the #wrapper a z-index setting of 9.

With that we are getting quite close. All we are missing is the 3 elements that slide out from under the #trapazoid2. They need to be configured so that they are under #trapazoid2, but over the #potato. We will do that with z-index settings. First we have to get them in there with HTML markup, and then hide them with CSS.

STEP SIX: On banner-start.html, add the following 3 new elements, lines 15 thru 19 below:

STEP SEVEN: On banner-start.css, add these three new rules below all the other rules. There is a lot of code this time because the button a#signUp is made with CSS 3 gradients:

Note that you can’t see them. It is helpful to be able to see them in case you need to tweak their position when you use different text copy.

STEP EIGHT: On banner-start.css, make the #trapazoid2 transparent and red, also temporarily change the background color of #banner to a butterscotch color (not shown):

STEP NINE: On banner-start.js, add these four new commands, shown as lines 12 to 15below. Save the file and view the animation.

wordpress13

The last line in the script above tells the banner to hide after 5 seconds. Typically ads run for two loops, and then stop. You can make them run indefinitely, but that is frowned on as a best practice.
STEP TEN: On banner-start.css, change the background color of #banner back to #333. Also, on #trapazoid2, change the opacity to 1, and the background-color to #333. View the animation and it should be perfect…except that it fades out completely…again, not a perfect user experience.

STEP ELEVEN: On banner-start.js, modify this line:
var tl = new TimelineMax();
so that it looks like this:
var tl = new TimelineMax({repeat:-1});

The repeat:-1 tells the animation to loop forever. That is better than it was, but it would be even better if we could tailor the repeats to exactly the number our client requests. For that to work, we have to put a counter in our code that checks to see how many times the animation has looped, and stops it after the desired number of loops.

STEP TWELVE: On banner-start.js, add two variables called loop, and loopMax, shown as lines 4 & 5 below. If you have ever written a for loop, you will know that we set up a statement that initializes the variable value (var loop = 0), compares current value of loop to the max (loopMax < 2), and increments the variable up 1 number (loop plus 1). Then the for loop runs again, repeatingĀ  the comparing and incrementing.

for (var i=0, i < 2, i++) {
loop the animation
}

 

STEP THIRTEEN: On banner-start.js, insert this command .call(loopCheck) on an empty line before .to(“#banner”,…..), line 17. And also add in the function loopCheck(){}., lines 20 thru 30. Save the file and run the animation.

By inserting the .call(loopCheck) command before the .to(“#banner”) command, we allow our counter to do a quick check of how many loops have happened. If the loop variable value has been incremented up to a value of 2, the loopCheck function cycles through to the else statement, which tells the timeline (tl) to pause before gettting to the last command. This leaves our banner visible for someone to click the button…now that all the motion has stopped.

STEP FOURTEEN: The button is already clickable, but wouldn’t it be nice if we could attach a cute little animation to the hover state? As the greensock people would say: “No problem!”. Add this new code to the top of banner-start.js. This code finds the element with the #signUp id, which is the red button, and tells it to have a handy little roll-over, roll-off effect.

Nice Work!

You now have a functioning horizontal banner ad. It’s not responsive…so if that causes problems, you will need to make a vertical version of it, and hide the horizontal one for smartphones via some media queries.

In conclusion, here is all the code from banner-start.js:

Here is all the code from banner-start.html:

And here is the entire banner-start.css code:

You can see both the horizontal and vertical versions of this ad running here.

http://websterart.com/html/animation-v4.php

I also have media queries in place that hide the horizontal and show the vertical if you arrive on a phone. If you like this tutorial, feel free to share it with your programmer friends. I wrote this one as a lesson plan for my students. My dean had given me some funds to develop curriculum for our new web program that will be branching off in the spring of 2018. I used about 5 of those paid hours to write this, though the other 16 hours were my own time…working for free.