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

[Felix Riesterer]

Lieber Enrico,

Dein JavaScript benutzt jede Menge globale Variablen und besitzt für jede "Wolke" eine eigene Animationsfunktion. Besser wäre es, wenn eine Wolke als Objekt ihre eigene Animationsfunktion hätte, dazu ein paar Parameter, wie sie sich von der Position und Geschwindigkeit her fortbewegt - und schon könntest Du jede Wolke als eine Instanz eines "Vorlagenobjektes" bauen.

Vielleicht hilft Dir ja mein Artikel beim Umbau Deines Projektes in eine objektorientierte Struktur?

Liebe Grüße,

Felix Riesterer.

[Enrico]

Hallo Felix,

danke für Deine Antwort und den Link, guter Ansatz, den ich umsetzen werde.

Gruß
Enrico