Parallax scrolling with Html5 and css3

The method is that each panel has a fixed width and height , and contains between six and 12 layers. A layer is either a transparent PNG (larger than the panel) or a speech bubble. The movement of the mouse moves the layer on both X and Y axis with a jquery easing effect, according to speed and direction parameters. The parallax effect is triggered by each layer having different parameters.
Technique
1. In dreamweaver I created a HTML5 page and started by creating an area to fill with multiple background images. For this I made a simple div container.
code:

id="scroll"> box

2. Then I set the style.
.parallax {
width:400px;
height:180px;
padding:10px 10px 10px 10px
background-colour:#a0e0ff;
background-image:url (tree.png),url(ground.png),url(clouds.png),url(sky.png);

3.The finishing styling to the div.
background-position:0 0, 0 0, 0 0, 0 0;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x,
}


4.The javascript.
< script type="text/ javascript">
var clouds_x =0;
var ground_x =0;
var tree_x=0;
function animate(){
clouds_x = clouds_x - . 2;
tree_x = tree_x - .7;
ground_x = ground_x - .5;

5.Final code
Document .getElementById
(' scroll').style.
background Position =
tree_x+'px 0, '+ground_x+'px 0,
'+ clouds_x+'px 0, 0 0';
t= set Time out ('animate() ' , 10);
}
animate();