{"id":1602,"date":"2017-07-08T00:29:36","date_gmt":"2017-07-08T00:29:36","guid":{"rendered":"http:\/\/websterart.com\/wordpress\/?page_id=1602"},"modified":"2020-01-13T20:46:36","modified_gmt":"2020-01-13T20:46:36","slug":"animated-banner-tutorial-part-2","status":"publish","type":"page","link":"https:\/\/websterart.com\/wordpress\/animated-banner-tutorial-part-2\/","title":{"rendered":"Animated Banner Tutorial Part 2"},"content":{"rendered":"

This is part 2, if you are looking for part 1, it is here<\/a>.<\/p>\n

Sliding Reveal<\/h3>\n

Open banner-done.html<\/strong> and drag the playhead slider over until you see the white rectangle slide out from underneath the diagonal gray band.<\/p>\n

\"wordpress8\"<\/a><\/p>\n

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<\/span>) with rounded corners is fairly obvious. But getting it to slide out from underneath a slanted rectangle (called #trapazoid2<\/span>) 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.<\/p>\n

STEP ONE<\/strong>:<\/span> Lets get the trapazoid2 and potato in place. Open banner-start.html<\/strong> and add two new elements called trapazoid2 and potato. It is lines 14 & 15 below:<\/p>\n

<!--this is banner-start.html--> \r\n<div id=\"banner\"> \r\n   <div id=\"pitchWrapper\"> \r\n\t     <div id=\"quote\"> \r\n\t     \tWe make the best Mufflers \r\n\t     <\/div> \r\n\t     <div id=\"bouncyGreen\">\r\n\t       in Tacoma \r\n\t     <\/div> \r\n\t<\/div><!--end pitchWrapper div--> \r\n\t<img src=\"images\/simon2.png\" alt=\"simon\" id=\"simon\">\r\n\t<h1 id=\"callUs\">Call our Cellphone:<\/h1>\r\n\t<h2 id=\"phoneNumber\">253-234-5678<\/h2>\r\n\t<div id=\"trapazoid2\"><\/div><!-- new code -->\r\n\t<div id=\"potato\"><\/div>\t<!-- new code -->    \r\n <\/div><!--end banner div--><\/pre>\n
STEP TWO:<\/span><\/strong> On banner-start.css<\/strong>, add these two new rules below the other rules. Save your changes to both the html and css and view the animation.<\/p>\n
\/*banner-start.css*\/\r\n#trapazoid2{\r\n\tbackground-color: #f00;\r\n\tposition:absolute;\r\n\tleft:39px;\r\n\ttop:0;\r\n\theight:90px;\r\n\twidth:340px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\t-moz-transform: skew(-22deg, 0deg);\r\n\t-webkit-transform: skew(-22deg, 0deg);\r\n\t-o-transform: skew(-22deg, 0deg);\r\n\t-ms-transform: skew(-22deg, 0deg);\r\n\ttransform: skew(-22deg, 0deg);\r\n\topacity:0.5;\r\n\tz-index: 5;\r\n}\r\n\r\n#potato {\r\n  height: 90px;\r\n  width: 450px;\r\n  background-color: #fff;\r\n  -webkit-border-radius: 15px;\r\n  -moz-border-radius: 15px;\r\n  border-radius: 15px;\r\n  position:absolute;\r\n  left:20px;\r\n  top:0;\r\n   -ms-transform: scale(0.5,1); \/* IE 9 *\/\r\n   -webkit-transform: scale(0.5,1); \/* Safari *\/\r\n   transform: scale(0.5,1); \/* Standard syntax *\/\r\n  \/*opacity: 0;*\/\r\n  z-index: 2;\r\n}<\/pre>\n
This is what you will see after it has finished running:<\/p>\n
\"wordpress9\"<\/a>The 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);<\/span> to half it’s normal width. This allows it to hide under the smaller trapazoid2 until it is needed.<\/p>\n
To generate the transform properties, this website has a cool interactive code generator:<\/p>\n
http:\/\/www.css3maker.com\/css3-transform.html<\/a><\/p>\n
STEP THREE:<\/span><\/strong> 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<\/a>. I’m also embedding it in this site, but the pdf has better image quality.<\/p>\n
\"wordpress-10\"<\/a><\/p>\n
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<\/span> settings for all the stacked up elements. Keep in mind that you can only apply z-index<\/strong> to an element that has been positioned, as in position: absolute, relative, fixed<\/span>, etc.<\/p>\n
STEP FOUR:<\/span><\/strong> Open banner-start.js<\/strong> 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<\/span>. To return to the lipstick analogy, the lipstick just moved out of the tube and is ready to use.<\/p>\n
\/\/ this is banner-start.js\r\nvar mySplitText = new SplitText(\"#quote\", {type:\"words\"});\r\nvar tl = new TimelineMax();\r\ntl.to(\"#banner\", 1.5, {opacity:1, ease:Cubic.easeOut})\r\n.staggerFrom(mySplitText.words, 0.3, {opacity:0, scale:0.4,  ease:Back.easeOut}, 0.15)\r\n.from(\"#bouncyGreen\", 0.9,{opacity:0, y:50, ease:Elastic.easeOut, delay:0.5})\r\n.to(\"#pitchWrapper\", 1, {opacity:0, scale:0.3, y:22, ease:Back.easeIn, delay:0.5})\r\n.from(\"#callUs\", 0.5,{x:-430, ease:Cubic.easeOut, delay:0.5})\r\n.from(\"#phoneNumber\", 0.5,{x:-430, ease:Cubic.easeOut},\"-=0.4\")\r\n.from(\"#simon\", 0.5,{x:-100, ease:Cubic.easeOut},\"-=0.4\")\r\n.to(\"#potato\", 0.7,{x:330, scaleX:1, ease:Cubic.easeOut})<\/pre>\n
\"wordpress11\"<\/a><\/p>\n
STEP FIVE:<\/span><\/strong> Now that we know our #potato<\/strong> is hiding and animating correctly, lets make the #trapazoid2<\/strong> element fully opaque, and set it’s background color to the same as the #banner<\/strong>. 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<\/strong> and modify the\u00a0 opacity and background-color settings. Also, add a rule that gives the #pitchWrapper<\/strong> a z-index setting of 9.<\/p>\n
\/*this is banner-start.css*\/\r\n#trapazoid2{\r\n\tbackground-color: #333;\/* new code *\/\r\n\tposition:absolute;\r\n\tleft:39px;\r\n\ttop:0;\r\n\theight:90px;\r\n\twidth:340px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\t-moz-transform: skew(-22deg, 0deg);\r\n\t-webkit-transform: skew(-22deg, 0deg);\r\n\t-o-transform: skew(-22deg, 0deg);\r\n\t-ms-transform: skew(-22deg, 0deg);\r\n\ttransform: skew(-22deg, 0deg);\r\n\topacity:1;\/* new code *\/\r\n\tz-index: 5;\r\n}\r\n#pitchWrapper{\/* new rule *\/\r\n position:absolute;\r\n left:0;\r\n top:0;\r\n z-index: 9;\r\n}<\/pre>\n
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.<\/p>\n
STEP SIX:<\/span> <\/strong>On banner-start.html<\/strong>, add the following 3 new elements, lines 15 thru 19 below:<\/p>\n
<div id=\"banner\">\r\n\t<div id=\"pitchWrapper\">\r\n\t\t<div id=\"quote\">\r\n\t\t\tWe make the best Mufflers \r\n\t\t<\/div>\r\n\t\t<div id=\"bouncyGreen\">\r\n\t\t\tin Tacoma\r\n\t\t<\/div>\r\n\t<\/div><!--end pitchWrapper div-->\r\n\t<img src=\"images\/simon2.png\" alt=\"simon\" id=\"simon\">\r\n\t<h1 id=\"callUs\">Call our Cellphone:<\/h1>\r\n\t<h2 id=\"phoneNumber\">253-234-5678<\/h2>\r\n\t<div id=\"trapazoid2\"><\/div>\r\n\t<div id=\"potato\"><\/div>\r\n\t<h1 id=\"theDate\">September 22<\/h1><!-- new code -->\r\n\t<div id=\"description\"><!-- new code -->\r\n\t\tWatch us weld custom Stainless Steel mufflers for your Honda Civic  \r\n\t<\/div>\r\n\t<a href=\"http:\/\/www.websterart.com\" id=\"signUp\">Sign Up Today!<\/a> <!-- new code -->\r\n\r\n<\/div><!--end banner div--><\/pre>\n
STEP SEVEN:<\/span> <\/strong>On banner-start.css<\/strong>, add these three new rules below all the other rules. There is a lot of code this time because the button a#signUp<\/span> is made with CSS 3 gradients:<\/p>\n
h1#theDate {\r\n\tfont-family: Arial, Helvetica, sans-serif;\r\n\tfont-size: 2em;\r\n\tcolor:#333;\r\n\tposition:absolute;\r\n\tleft: 200px;\r\n\ttop:0px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\tz-index: 3;\r\n}\r\n\r\n#description {\r\n\tposition:absolute;\r\n\tleft:150px;\r\n\ttop:31px;\r\n\tmargin:0;\r\n\tpadding:0;\t\r\n\tcolor:#9E5111;\r\n\twidth:200px;\r\n\tz-index: 4;\r\n}\r\n#banner a#signUp {\r\n\tdisplay:block;\r\n\tposition:absolute;\r\n\ttop:15px;\r\n\tright:20px;\r\n\tcolor: rgb(230, 230, 230);\r\n\tfont-size: 1.2em;\r\n\ttext-decoration: none;\r\n\tpadding: 15px;\r\n\ttext-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);\r\n\t-webkit-border-radius: 19.864864864864863px;\r\n\t-moz-border-radius: 19.864864864864863px;\r\n\tborder-radius: 19.864864864864863px;\r\n\tbackground: rgb(176, 1, 42);\r\n\tbackground: -moz-linear-gradient(90deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\tbackground: -webkit-linear-gradient(90deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\tbackground: -o-linear-gradient(90deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\tbackground: -ms-linear-gradient(90deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\tbackground: linear-gradient(0deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\t-webkit-box-shadow: 5px 8px 7px rgba(50, 50, 50, 0.75);\r\n\t-moz-box-shadow:    5px 8px 7px rgba(50, 50, 50, 0.75);\r\n\tbox-shadow:         5px 8px 7px rgba(50, 50, 50, 0.75);\r\n   -ms-transform: scale(0.3,0.3); \/* IE 9 *\/\r\n   -webkit-transform: scale(0.3,0.3); \/* Safari *\/\r\n   transform: scale(0.3,0.3); \/* Standard syntax *\/\r\n\/*http:\/\/css3gen.com\/button-generator\/*\/\r\n\topacity:0;\r\n\tz-index: 10;\r\n\r\n}<\/pre>\n
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.<\/p>\n
STEP EIGHT:<\/span><\/strong> On banner-start.css<\/strong>, make the #trapazoid2<\/strong> transparent and red, also temporarily change the background color of #banner<\/strong> to a butterscotch color (not shown):<\/p>\n
#trapazoid2{\r\n\tbackground-color: #f00;\/* new code *\/\r\n\tposition:absolute;\r\n\tleft:39px;\r\n\ttop:0;\r\n\theight:90px;\r\n\twidth:340px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\t-moz-transform: skew(-22deg, 0deg);\r\n\t-webkit-transform: skew(-22deg, 0deg);\r\n\t-o-transform: skew(-22deg, 0deg);\r\n\t-ms-transform: skew(-22deg, 0deg);\r\n\ttransform: skew(-22deg, 0deg);\r\n\topacity:0.5;\/* new code *\/\r\n\tz-index: 5;\r\n}<\/pre>\n
STEP NINE:<\/span><\/strong> On banner-start.js, add these four new commands, shown as lines 12 to 15below. Save the file and view the animation.<\/p>\n
\/\/ this is banner-start.js\r\nvar mySplitText = new SplitText(\"#quote\", {type:\"words\"});\r\nvar tl = new TimelineMax();\r\ntl.to(\"#banner\", 1.5, {opacity:1, ease:Cubic.easeOut})\r\n.staggerFrom(mySplitText.words, 0.3, {opacity:0, scale:0.4,  ease:Back.easeOut}, 0.15)\r\n.from(\"#bouncyGreen\", 0.9,{opacity:0, y:50, ease:Elastic.easeOut, delay:0.5})\r\n.to(\"#pitchWrapper\", 1, {opacity:0, scale:0.3, y:22, ease:Back.easeIn, delay:0.5})\r\n.from(\"#callUs\", 0.5,{x:-430, ease:Cubic.easeOut, delay:0.5})\r\n.from(\"#phoneNumber\", 0.5,{x:-430, ease:Cubic.easeOut},\"-=0.4\")\r\n.from(\"#simon\", 0.5,{x:-100, ease:Cubic.easeOut},\"-=0.4\")\r\n.to(\"#potato\", 0.7,{x:330, scaleX:1, ease:Cubic.easeOut})\r\n.to(\"#theDate\", 0.5,{x:200, ease:Cubic.easeOut})\r\n.to(\"#description\", 0.5,{x:250, ease:Cubic.easeOut},\"-=0.4\")\r\n.to(\"#signUp\", 0.8,{opacity:1, scale:1, ease:Elastic.easeOut, delay:0.8})\r\n.to(\"#banner\", 0.5,{autoAlpha:0,delay:5});<\/pre>\n
\"wordpress13\"<\/a><\/p>\n
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.
\nSTEP TEN:<\/span><\/strong> On banner-start.css<\/strong>, change the background color of #banner<\/strong> back to #333. Also, on #trapazoid2<\/strong>, 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.<\/p>\n
STEP ELEVEN:<\/span><\/strong> On banner-start.js<\/strong>, modify this line:
\nvar tl = new TimelineMax(); <\/span>
\nso that it looks like this:
\nvar tl = new TimelineMax({repeat:-1});<\/span><\/p>\n
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.<\/p>\n
STEP TWELVE:<\/span><\/strong> On banner-start.js<\/strong>, add two variables called loop<\/strong>, and loopMax<\/strong>, 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\u00a0 the comparing and incrementing.
\n
\nfor (var i=0, i < 2, i++) {
\nloop the animation
\n}<\/span><\/p>\n
\/\/ this is banner-start.js\r\nvar mySplitText = new SplitText(\"#quote\", {type:\"words\"});\r\nvar tl = new TimelineMax({repeat:-1});\r\nloop =0;\r\nloopMax = 2;\r\ntl.to(\"#banner\", 1.5, {opacity:1, ease:Cubic.easeOut})\r\n.staggerFrom(mySplitText.words, 0.3, {opacity:0, scale:0.4,  ease:Back.easeOut}, 0.15)\r\n.from(\"#bouncyGreen\", 0.9,{opacity:0, y:50, ease:Elastic.easeOut, delay:0.5})\r\n.to(\"#pitchWrapper\", 1, {opacity:0, scale:0.3, y:22, ease:Back.easeIn, delay:0.5})\r\n.from(\"#callUs\", 0.5,{x:-430, ease:Cubic.easeOut, delay:0.5})\r\n.from(\"#phoneNumber\", 0.5,{x:-430, ease:Cubic.easeOut},\"-=0.4\")\r\n.from(\"#simon\", 0.5,{x:-100, ease:Cubic.easeOut},\"-=0.4\")\r\n.to(\"#potato\", 0.7,{x:330, scaleX:1, ease:Cubic.easeOut})\r\n.to(\"#theDate\", 0.5,{x:200, ease:Cubic.easeOut})\r\n.to(\"#description\", 0.5,{x:250, ease:Cubic.easeOut},\"-=0.4\")\r\n.to(\"#signUp\", 0.8,{opacity:1, scale:1, ease:Elastic.easeOut, delay:0.8})\r\n.to(\"#banner\", 0.5,{autoAlpha:0,delay:5});<\/pre>\n
 <\/p>\n
STEP THIRTEEN:<\/span><\/strong> On banner-start.js, <\/strong>insert this command .call(loopCheck)<\/span> on an empty line before .to(“#banner”,…..)<\/span>, line 17. And also add in the function loopCheck(){}.<\/span>, lines 20 thru 30. Save the file and run the animation.<\/p>\n
\/\/ this is banner-start.js\r\nvar mySplitText = new SplitText(\"#quote\", {type:\"words\"});\r\nvar tl = new TimelineMax({repeat:-1});\r\nloop =0;\r\nloopMax = 2;\r\ntl.to(\"#banner\", 1.5, {opacity:1, ease:Cubic.easeOut})\r\n.staggerFrom(mySplitText.words, 0.3, {opacity:0, scale:0.4,  ease:Back.easeOut}, 0.15)\r\n.from(\"#bouncyGreen\", 0.9,{opacity:0, y:50, ease:Elastic.easeOut, delay:0.5})\r\n.to(\"#pitchWrapper\", 1, {opacity:0, scale:0.3, y:22, ease:Back.easeIn, delay:0.5})\r\n.from(\"#callUs\", 0.5,{x:-430, ease:Cubic.easeOut, delay:0.5})\r\n.from(\"#phoneNumber\", 0.5,{x:-430, ease:Cubic.easeOut},\"-=0.4\")\r\n.from(\"#simon\", 0.5,{x:-100, ease:Cubic.easeOut},\"-=0.4\")\r\n.to(\"#potato\", 0.7,{x:330, scaleX:1, ease:Cubic.easeOut})\r\n.to(\"#theDate\", 0.5,{x:200, ease:Cubic.easeOut})\r\n.to(\"#description\", 0.5,{x:250, ease:Cubic.easeOut},\"-=0.4\")\r\n.to(\"#signUp\", 0.8,{opacity:1, scale:1, ease:Elastic.easeOut, delay:0.8})\r\n.call(loopCheck)\r\n.to(\"#banner\", 0.5,{autoAlpha:0,delay:5});\r\n\r\nfunction loopCheck(){\r\n\t\/\/console.log(\"loopCheck\")\r\n\tloop++;\r\n\tif (loop < loopMax) {\r\n\t\t\/\/console.log(\"play again\")\r\n\t\ttl.play();\r\n\t} else{\r\n\t\t\/\/console.log(\"done\")\r\n\t\ttl.pause();\r\n\t}\r\n}<\/pre>\n
By inserting the .call(loopCheck)<\/span> command before the .to(“#banner”)<\/span> 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<\/span>) 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.<\/p>\n
STEP FOURTEEN:<\/span><\/strong> 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<\/strong>. This code finds the element with the #signUp<\/strong> id, which is the red button, and tells it to have a handy little roll-over, roll-off effect.<\/p>\n
register = document.getElementById(\"signUp\");\r\n\r\nsignUp.onmouseenter = function() {\r\n  TweenLite.to(signUp, 0.2, {scale:1.2})\r\n}\r\n\r\nsignUp.onmouseleave = function() {\r\n  TweenLite.to(signUp, 0.2, {scale:1})\r\n}<\/pre>\n
Nice Work!<\/h3>\n
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.<\/p>\n
In conclusion, here is all the code from banner-start.js:<\/p>\n
\/\/ this is banner-start.js\r\nregister = document.getElementById(\"signUp\");\r\n\r\nsignUp.onmouseenter = function() {\r\n  TweenLite.to(signUp, 0.2, {scale:1.2})\r\n}\r\n\r\nsignUp.onmouseleave = function() {\r\n  TweenLite.to(signUp, 0.2, {scale:1})\r\n}\r\nvar mySplitText = new SplitText(\"#quote\", {type:\"words\"});\r\nvar tl = new TimelineMax({repeat:-1});\r\nloop =0;\r\nloopMax = 2;\r\ntl.to(\"#banner\", 1.5, {opacity:1, ease:Cubic.easeOut})\r\n.staggerFrom(mySplitText.words, 0.3, {opacity:0, scale:0.4,  ease:Back.easeOut}, 0.15)\r\n.from(\"#bouncyGreen\", 0.9,{opacity:0, y:50, ease:Elastic.easeOut, delay:0.5})\r\n.to(\"#pitchWrapper\", 1, {opacity:0, scale:0.3, y:22, ease:Back.easeIn, delay:0.5})\r\n.from(\"#callUs\", 0.5,{x:-430, ease:Cubic.easeOut, delay:0.5})\r\n.from(\"#phoneNumber\", 0.5,{x:-430, ease:Cubic.easeOut},\"-=0.4\")\r\n.from(\"#simon\", 0.5,{x:-100, ease:Cubic.easeOut},\"-=0.4\")\r\n.to(\"#potato\", 0.7,{x:330, scaleX:1, ease:Cubic.easeOut})\r\n.to(\"#theDate\", 0.5,{x:200, ease:Cubic.easeOut})\r\n.to(\"#description\", 0.5,{x:250, ease:Cubic.easeOut},\"-=0.4\")\r\n.to(\"#signUp\", 0.8,{opacity:1, scale:1, ease:Elastic.easeOut, delay:0.8})\r\n.call(loopCheck)\r\n.to(\"#banner\", 0.5,{autoAlpha:0,delay:5});\r\n\r\nfunction loopCheck(){\r\n\t\/\/console.log(\"loopCheck\")\r\n\tloop++;\r\n\tif (loop < loopMax) {\r\n\t\t\/\/console.log(\"play again\")\r\n\t\ttl.play();\r\n\t} else{\r\n\t\t\/\/console.log(\"done\")\r\n\t\ttl.pause();\r\n\t}\r\n}<\/pre>\n
Here is all the code from banner-start.html:<\/p>\n
<!doctype html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title> Ad Banner <\/title>\r\n<link rel=\"stylesheet\" type=\"text\/css\" media=\"screen\" href=\"banner-start.css\">\r\n\r\n<\/head>\r\n<body>\r\n <div id=\"banner\"> \r\n   <div id=\"pitchWrapper\"> \r\n\t     <div id=\"quote\"> \r\n\t     \tWe make the best Mufflers \r\n\t     <\/div> \r\n\t     <div id=\"bouncyGreen\">\r\n\t       in Tacoma \r\n\t     <\/div> \r\n\t<\/div><!--end pitchWrapper div--> \r\n\t<img src=\"images\/simon2.png\" alt=\"simon\" id=\"simon\">\r\n\t<h1 id=\"callUs\">Call our Cellphone:<\/h1>\r\n\t<h2 id=\"phoneNumber\">253-234-5678<\/h2>\r\n\t<div id=\"trapazoid2\"><\/div><!-- new code -->\r\n\t<div id=\"potato\"><\/div>\t<!-- new code --> \r\n\t<h1 id=\"theDate\">September 22<\/h1>\r\n\t<div id=\"description\">\r\n\t\tWatch us weld custom Stainless Steel mufflers for your Honda Civic  \r\n\t<\/div>\r\n\t<a href=\"http:\/\/www.websterart.com\" id=\"signUp\">Sign Up Today!<\/a> \r\n   \r\n <\/div><!--end banner div-->\r\n\r\n<script src=\"js\/jquery-1.10.1.min.js\"><\/script>\r\n<script src=\"js\/jqueryUI\/js\/jquery-ui-1.10.3.custom.min.js\"><\/script>\r\n<script src=\"js\/TweenMax.min.js\"><\/script>\r\n<script src=\"js\/SplitText.min.js\"><\/script>\r\n<script src=\"js\/banner-start.js\"><\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
And here is the entire banner-start.css code:<\/p>\n
\/******* this is banner-start.css ********\/ \r\nbody { \r\n\tbackground-color: gray; \r\n} \r\n#banner { \r\n\theight: 90px; \r\n\twidth: 800px; \r\n\tbackground-color: #333; \r\n\tborder-radius: 15px; \r\n\tposition: relative; \r\n\topacity: 0; \r\n\tfont: 0.9em Verdana, Helvetica, sans-serif; \r\n\tcolor: white; \r\n\t\/*overflow: hidden;*\/ \r\n}\r\n#quote {\r\n\tfont:1.5em Verdana, Helvetica, sans-serif;\r\n\tfont-style: bold;\r\n\tcolor: #ccc;\r\n\tfloat: left;\r\n\tletter-spacing: 0.08em;\r\n\tmargin: 25px 0 0 10px;\r\n}\r\n\r\n#bouncyGreen {\r\n\t\r\n\tfont:3em Georgia, Times, serif;\r\n\tfloat: left;\r\n\tcolor: #0f0;\r\n\tmargin: 10px 0 0 0;\/*0ld was margin-top:-11px*\/\r\n\tpadding:0;\r\n}\r\n\r\n#simon{\r\n\tposition:absolute;\r\n\tleft:10px;\r\n\ttop:0px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\tz-index: 6;\r\n}\r\n\r\nh1#callUs{\r\n\tfont-family: Georgia, Times, serif;\r\n\tfont-size: 1.5em;\r\n\tcolor:#0f0;\r\n\tposition:absolute;\r\n\tleft: 90px;\r\n\ttop:10px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\tz-index:8;\r\n}\r\nh2#phoneNumber{\r\n\tfont-family: Georgia, Times, serif;\r\n\tfont-size: 1.0em;\r\n\r\n\tletter-spacing: 3px;\r\n\tcolor:#fff;\r\n\tposition:absolute;\r\n\tleft:90px;\r\n\ttop:45px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\tz-index:7;\t\r\n}\r\n#trapazoid2{\r\n\tbackground-color: #333;\r\n\tposition:absolute;\r\n\tleft:39px;\r\n\ttop:0;\r\n\theight:90px;\r\n\twidth:340px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\t-moz-transform: skew(-22deg, 0deg);\r\n\t-webkit-transform: skew(-22deg, 0deg);\r\n\t-o-transform: skew(-22deg, 0deg);\r\n\t-ms-transform: skew(-22deg, 0deg);\r\n\ttransform: skew(-22deg, 0deg);\r\n\topacity:1;\/* new code *\/\r\n\tz-index: 5;\r\n}\r\n#pitchWrapper{\r\nposition:absolute;\r\nleft:0;\r\ntop:0;\r\nz-index: 9;\r\n}\r\n#potato {\r\n  height: 90px;\r\n  width: 450px;\r\n  background-color: #fff;\r\n  -webkit-border-radius: 15px;\r\n  -moz-border-radius: 15px;\r\n  border-radius: 15px;\r\n  position:absolute;\r\n  left:20px;\r\n  top:0;\r\n   -ms-transform: scale(0.5,1); \/* IE 9 *\/\r\n   -webkit-transform: scale(0.5,1); \/* Safari *\/\r\n   transform: scale(0.5,1); \/* Standard syntax *\/\r\n  \/*opacity: 0;*\/\r\n  z-index: 2;\r\n}\r\nh1#theDate {\r\n\tfont-family: 'Abel', sans-serif;\r\n\tfont-size: 2em;\r\n\t\/*font-family: 'Gravitas One', cursive;\r\n\tfont-family: 'Sonsie One', cursive;*\/\r\n\tcolor:#333;\r\n\tposition:absolute;\r\n\tleft: 200px;\r\n\ttop:0px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\tz-index: 3;\r\n}\r\n\r\n#description {\r\n\tposition:absolute;\r\n\tleft:150px;\r\n\ttop:31px;\r\n\tmargin:0;\r\n\tpadding:0;\t\r\n\tcolor:#9E5111;\r\n\twidth:200px;\r\n\tz-index: 4;\r\n}\r\n#banner a#signUp {\r\n\tdisplay:block;\r\n\tposition:absolute;\r\n\ttop:15px;\r\n\tright:20px;\r\n\tcolor: rgb(230, 230, 230);\r\n\tfont-size: 1.2em;\r\n\ttext-decoration: none;\r\n\tpadding: 15px;\r\n\ttext-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);\r\n\t-webkit-border-radius: 19.864864864864863px;\r\n\t-moz-border-radius: 19.864864864864863px;\r\n\tborder-radius: 19.864864864864863px;\r\n\tbackground: rgb(176, 1, 42);\r\n\tbackground: -moz-linear-gradient(90deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\tbackground: -webkit-linear-gradient(90deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\tbackground: -o-linear-gradient(90deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\tbackground: -ms-linear-gradient(90deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\tbackground: linear-gradient(0deg, rgb(176, 1, 42) 30%, rgb(250, 20, 0) 70%);\r\n\t-webkit-box-shadow: 5px 8px 7px rgba(50, 50, 50, 0.75);\r\n\t-moz-box-shadow:    5px 8px 7px rgba(50, 50, 50, 0.75);\r\n\tbox-shadow:         5px 8px 7px rgba(50, 50, 50, 0.75);\r\n   -ms-transform: scale(0.3,0.3); \/* IE 9 *\/\r\n   -webkit-transform: scale(0.3,0.3); \/* Safari *\/\r\n   transform: scale(0.3,0.3); \/* Standard syntax *\/\r\n\/*http:\/\/css3gen.com\/button-generator\/*\/\r\n\topacity:0;\r\n\tz-index: 10;\r\n\r\n}\r\n<\/pre>\n
You can see both the horizontal and vertical versions of this ad running here.<\/p>\n
http:\/\/websterart.com\/html\/animation-v4.php<\/a><\/p>\n
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.<\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
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. To get all this to work we have to configure and style half a dozen different elements […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-1602","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/pages\/1602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1602"}],"version-history":[{"count":27,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/pages\/1602\/revisions"}],"predecessor-version":[{"id":3488,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/pages\/1602\/revisions\/3488"}],"wp:attachment":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}