Hallo,
Ich habe eine Internetseite erstellt, auf der der Inhalt dynamisch per JavaScript aufgebaut wird. Zur Zeit werden die Elemente durch "document.getElementByID("foo").innerHTML" geändert. Da das etwas kantig aussieht, möchte ich einen Slide-Effekt einbauen.
Meine Idee ist bisher:
in einem <div>-Container werden 3 <div>-Container nebeneinander eingebunden, wobei der 1. links und der 3. rechts komplett aus dem Anzeigebereich herausragt und durch "overflow:hidden" unsichtbar ist. Durch einen Klick auf den entsprechenden Button wird "document.getElementByID("bar").style.left = '100%'" aufgerufen, was die inneren Container verschiebt, sodass jetzt statt dem 2. der 1. Container sichtbar ist.
Dies wird durch den CSS3-Tag "(...)transition:all 1.0s ease-in-out;" auch schick animiert.
Jetzt war mein Gedanke, dass ich vor Beginn der Animation den Inhalt von 2 auf 3 schiebe und 3 OHNE ANIMATION nach links schiebe, dann den Inhalt von 2 anpasse um diesen Container anschließen MIT ANIMATION nach rechts zu schieben. Für den Benutzer würde es dann so aussehen, als würde er "endlos" durch die Seite scrollen können, ohne dass ich sehr viel Speicher verbrachen muss. Siehe dazu auch die Skizze:
plan.powerswitch.bplaced.net/images/animation.png
Meine Frage ist jetzt: Wie kann ich den Slide-Effekt mit JavaScript an- oder ausstellen? Oder habt ihr einen besseren Vorschlag? Und habt ihr meinen Text überhaupt verstehen können ;) ?
Grüße,
Simon
