Funktionen für Art "Parallax-Effekt" zusammenfassen

[Enrico]

Hallo,

ich bin gerade dabei, diesen Effekt (nach Aufrufen der Seite auf "Contact" klicken), der auf Flash basiert, über Javascript nachzubauen.

Mein Nachbau funktioniert auch einwandfrei, nun möchte ich den Code aber verkleinern und optimieren, um Resourcen zu sparen.

Hier der Code:

var viewportwidth;
     var viewportheight;

if (typeof window.innerWidth != 'undefined')
     {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
     }
     else
        if (typeof document.documentElement != 'undefined' &&
            typeof document.documentElement.clientWidth != 'undefined' &&
            document.documentElement.clientWidth != 0)
        {
           viewportwidth = document.documentElement.clientWidth,
           viewportheight = document.documentElement.clientHeight
        }
        else
        {
           viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
           viewportheight = document.getElementsByTagName('body')[0].clientHeight
        }

var Wolke_1 = null;
     var Wolke_2 = null;
     var Wolke_3 = null;
     var Wolke_4 = null;

var Position__Wolke_1 = null;
     var Position__Wolke_2 = null;
     var Position__Wolke_3 = null;
     var Position__Wolke_4 = null;

function doMove__Wolke_1()
     {
        Position__Wolke_1 = parseInt(Wolke_1.style.left)+1;

if (Position__Wolke_1 == viewportwidth + 149)
        {
           Position__Wolke_1 = -149;
        }

Wolke_1.style.left = Position__Wolke_1 +'px';

setTimeout(doMove__Wolke_1,40);
     }

function doMove__Wolke_2()
     {
        Position__Wolke_2 = parseInt(Wolke_2.style.left)+1;

if (Position__Wolke_2 == viewportwidth + 206)
        {
           Position__Wolke_2 = -206;
        }

Wolke_2.style.left = Position__Wolke_2 +'px';

setTimeout(doMove__Wolke_2,30);
     }

function doMove__Wolke_3()
     {
        Position__Wolke_3 = parseInt(Wolke_3.style.left)+1;

if (Position__Wolke_3 == viewportwidth + 262)
        {
           Position__Wolke_3 = -262;
        }

Wolke_3.style.left = Position__Wolke_3 +'px';

setTimeout(doMove__Wolke_3,20);
     }

function doMove__Wolke_4()
     {
        Position__Wolke_4 = parseInt(Wolke_4.style.left)+1;

if (Position__Wolke_4 == viewportwidth + 320)
        {
           Position__Wolke_4 = -320;
        }

Wolke_4.style.left = Position__Wolke_4 +'px';

setTimeout(doMove__Wolke_4,10);
     }

function init()
     {
        Wolke_1 = document.getElementById('Wolke_1');
        Wolke_2 = document.getElementById('Wolke_2');
        Wolke_3 = document.getElementById('Wolke_3');
        Wolke_4 = document.getElementById('Wolke_4');

Wolke_1.style.left = '-149px';
        Wolke_2.style.left = '-206px';
        Wolke_3.style.left = '-262px';
        Wolke_4.style.left = '-320px';

doMove__Wolke_1();
        doMove__Wolke_2();
        doMove__Wolke_3();
        doMove__Wolke_4();
     }

window.onload = init;

Am Einfachsten wäre es, wenn ich die Funktionen "doMove..." zu einer einzigen Funktion zusammenfügen könnte, mit einem umfassenden setTimeout für die eigentliche Funktion "doMove", allerdings stehe ich dann vor dem Problemen, wenn ich für die einzelnen Animationen je eine eigene weitere Pause definiere, sich dies auf die komplette Funktion auswirkt.

Ein Framework will ich nicht verwenden, da mir diese viel zu viele Funktionen enthalten, die ich nicht brauche.

Wie könnte ich die Zusammenfassung eurer Meinung nach umsetzen?

Vielen Dank für eure Hilfe.

Gruß
Enrico