How is this effect achieved?

How is this effect achieved?

I was wondering if anyone knows how the effect with the clouds is achieved?

See effect here: http://osc.template-help.com/joomla_23891/

There are about 4 images that sway back and forth, following the mouse movement.

I downloaded all 4 .js files (jquery.js, mootools.js, caption.js, and script.js). They are all in the same folder as my .html file that is linked to my .css file.

My css file contains the following code:

  1. #parallax {
        position:absolute;
        overflow:hidden;
        width:100%;
        margin:auto;
        height:328px;
        z-index:1;
        top:57px;
        left:0;
    }
    .layer-0 {
        text-align:center;
        position:absolute;
        top:57px;
        width:100%;
        left:0;
        z-index:999;   
    }
    .layer-1 {
        background:url(http://joomimg.s3.amazonaws.com/joomla_23891/templates/theme268/images/layer-1.png) no-repeat 50% 0;
        width:1123px;
        height:328px;
        margin:auto;
    }
    .layer-2 {
        width:1042px;
        background:url(http://joomimg.s3.amazonaws.com/joomla_23891/templates/theme268/images/layer-2.png) no-repeat 0 0;
        height:72px;
        z-index:1;
    }
    .layer-3 {
        width:729px;
        background:url(http://joomimg.s3.amazonaws.com/joomla_23891/templates/theme268/images/layer-4.png) no-repeat 0 0;
        height:125px;
        z-index:1;
    }
    .layer-4 {
        width:966px;
        background:url(http://joomimg.s3.amazonaws.com/joomla_23891/templates/theme268/images/layer-3.png) no-repeat 0 0;
        height:197px;
        z-index:1;
        position:absolute;
    }










































My result shows only 2 images (layer-1.png and layer-2.png) and they do not move at all.

Any ideas how to make this work?

Thanks in advance.