HTML 5 Banner Tutorial

In this tutorial I will be building a simple banner which animates left.

1.First you need to create the HTML page and set-up the banner. 


1a. Ensure you create a div which masks the content to do so simply create a div and set the     width, height, the position to relative and the overflow to hidden.


The div with an id of 'bannerMask':
<div id='bannerMask' ></div>


CSS style:

#bannerMask {
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}

1b. Place another div inside the masking div which will hold the rest of the content. This the position of this div to absolute. Ensure you set the correct width and set 'left' to '0px'.



The div with an id of 'wrapper':

<div id="bannerMask">
     <div id="wrapper">
  //
     </div>

</div>


CSS style:


#wrapper {
position: absolute;
width: 600px;
height: inherit;
left:0px;
background-color: #fff;
}


1c. Add your content within the 'wrapper' div. I've added to boxes which have a gradient background and which position side-by-side.

The content:

<div id="bannerMask">
     <div id="wrapper">
      <div id="red"></div><div id="green"></div>
     </div>
    </div>

CSS style:

#red {
float: left;
height: inherit;
width: 300px;
background-color: #f00;
filter: progid :DXImageTransform.Microsoft.gradient(startColorstr='#f00', endColorstr='#E01B6A'); /* for IE */
background: -webkit-gradient(linear, left top, right top, from(#f00), to(#E01B6A)); /* for webkit browsers */
background: -moz-linear-gradient(left,  #f00,  #E01B6A); /* for firefox 3.6+ */
}
#green {
float: left;
height: inherit;
width: 300px;
background-color: #00f;
filter: progid :DXImageTransform.Microsoft.gradient(startColorstr='#00f', endColorstr='#2FE01B'); /* for IE */
background: -webkit-gradient(linear, left top, right top, from(#00f), to(#2FE01B)); /* for webkit browsers */
background: -moz-linear-gradient(left,  #00f,  #2FE01B); /* for firefox 3.6+ */
}

2. Adding the Javascript to animate the Banner.

2a. I always wrap my code within a function which creates a local instance of the window. This is then executed when the Javascript file is loaded.

wrapping the window:

( function(window) {

//

}(window));

2b. Create a function to called 'Main' to set-up variables and event listeners prior to the page loading. Here I will add an event listener to check when the webpage has loaded. You need to create a function called 'loadComplete' to execute when the page is loaded. Finally I will call the 'Main' function.

( function(window) {

function Main() {

var enterFrame;

if(window.addEventListener) {

window.addEventListener("load", loadComplete);

} else {

window.attachEvent("onload", loadComplete);

}

}

   function loadComplete(event) {

//

    }    

Main();

}(window));

3c. I now have the Javascript setup I want to add a timer to move the content to the left.

First create a variable to store the timer. This will sit above the main function so its available globally. I've called it 'enterFrame'.

( function(window) {

var enterFrame;

function Main() {

 .....

Once the webapge has loaded we want to create a timer which executes a function very 30ms. I've added a 'setInterval' inside the 'loadComplete' event which calls a function called 'onEnterFrame' every 30ms.

......

function loadComplete(event) {

enterFrame = setInterval(onEnterFrame, 30);

}

function onEnterFrame() {

}

......

Finally in the 'onEnterFrame' function, I get the left value of the 'wrapper' div and check if it is less than -600. If it is then we remove the timer as its reached the end but if not we will move the 'wrapper' div back a pixel every 30ms.

here is the code:

function onEnterFrame() {

var x = document.getElementById('wrapper').style.left.replace("px", "");

console.log(x);

if(x > -600) {

x--;

document.getElementById('wrapper').style.left = x + "px";

} else {

clearInterval(enterFrame);

enterFrame = null;

}

x = null;

}