Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

JavaScript Grundkurs

Animationen über style

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sie können über die Manipulation von style auf einfache Weise mit der Hilfe von setTimeout() Animationen erstellen. Im Film sehen Sie, wie einfach das ist, wenn Sie auf bestimmte Details achten.
05:55

Transkript

Ich möchte Ihnen in diesem Film zeigen, wie leicht Sie mittels dem Styleobjeckt, beziehungsweise DHTML Animationen erstellen können. Betrachten Sie die Webseite, es nicht unbedingt spannend, was dann Inhalt zu sehen ist und man mag auch über die Optikqualität der Animation straiten, aber die Art und Weise, wie erzeugt hab, ist sehr einfach und sehr klar, denn Sie sehen hier, dass ich mit getelEmentsByTagName, beachten Sie darum liegt eine with document Anweisung, dass ich mit getElementsByTagName auf ein bestimmtes Element der Webseite zugreife und dessen Styleeisatz setzte. Ich muss und das ist ein bisschen umständlich, jede einzelne Stylesheeteigenschaft individuell notieren, aber hier verändere ich die Color, also die Schriftfarbe, die Hintergrundfarbe, die Schriftgröße, die Textausrichtung, noch mal die Hintergrundfarbe, jetzt für ein anderes Element, in dem Fall der Body. Hier was es die Überschrift der Ordnung 1 und hier nochmal die Textfarbe einer Überschrift der Ordnung H2. Wie Sie hier sehen rufe ich diese Funktion, in der diese Manipulation des Styleobjektes stattfindet einfach wieder selbst auf. Dazu nutze ich window.setTimeout, den Timer von Window, um quasi rekursiv per Selbstaufruf mich immer wieder selbst aufzurufen und zwar nach 1,5 Sekunden und das ist der zentrale Partie jeder Animation, die sich vorstellen können. Naja vielleicht nicht jeder, aber den Meisten. Man ruft sich selbst wieder auf und verändert dann einen Zustand zum Zeitpunkt X. Ich lasse hier noch eine Countervariable mitlaufen, die ich immer modul 4 nehme und dann kann ich hier über switchcase die einzelnen Fälle der Stilveränderung auswählen. Das war es und Sie sollen sich merken, dass das grundsätzlich so geht, wenn Sie das Styleobjekt zur Basis ihrer Animation nehmen, was ich sehr empfehlen würde. Auf eine Stelle sollten Sie bei Animationen über das Styleobjekt allerdings aufpassen, das sind hier diese Einheiten. Man muss beim Setzen von Stylesheetwert über das Styleobjekt sehr oft diese Einheiten mit im Wert angeben. Schauen wir uns noch eine andere Animation an, die mit diesen Einheiten einiges deutlich machen wird. Das ist die Snimation. Sie sehen also, dass ein Objekt dynamisch vergrößert wird und in der Position verschoben wird. Zum Schluß wird es übrigens auch noch ausgetauscht. An diesem Beispiel kann man einiges lernen, was Animationstechniken angeht. Im Wesentlichen habe ich wieder eine Webseite mit einem Button auf dem Animationmethode gestartet wird und auch die, die Animation zurücksetzt und dann habe ich hier ein Bild, dass ich in einem Divcontainer befindet und wir haben hier zwei IDs. Beachten Sie, dass eine Stylesheetdatei noch eine Rolle spielt und vor allen Dingen hier der Divcontainer absolut positioniert wird. Das ist der Schlüssel dafür, dass ich diese Verschiebung überhaupt vornehmen kann. Wenn Sie etwas über Styleobjekt verschieben wollen, müssen Sie es in irgendeiner Form vor positioniert haben und das ist JavaScript Datei. Ich erzeuge hier irgendwelche Bildobjekte. Die sind im Wesentlichen für den Austausch der Bilder zuständig. Was wir uns jetzt betrachten, ist hier die Möglichkeit mit dem Styleobjekkt wieder zu arbeiten und vor allen Dingen diese Passagen hier. Sie sehen, dass ich hier die Eigenschaften Top und Left manipuliere. Hier oben High und With, also die Höhe und die Breite. B1 ist die ID des Bildes, P1 von Div. Bei der Höhe und Breite muss ich die Einheiten drauf addieren. Die Werte ergeben sich über eine Countervariable, die in dem rekursiven Aufruf immer wieder erhöht wird. Das ist soweit der einfache Part, aber wenn ich auf einer bestehenden Angabe, sprich der Topangabe aufbauend um einen Schritt weiter gehen möchte, was ich hier tue, muss ich diesen Wert erstmal auslesen und ich bekomme dann die Einheiten mit zurück. Document getElementByID P1 Style Top würde entsprechend eine Einheit, was weiß ich 100px liefern als String und DPX kann ich nicht gebrauchen, wenn ich die numerisch verändern möchte, deswegen verwende ich hier parsint, um nur den numerischen Wert zu haben. Der String hintendran, PX fällt weg und dann kann ich diesen numerischen Wert um 1 erhöhen und dann muss ich aber die Einheit wieder drauf addieren. Das ist es worauf Sie auf jeden Fall achten müssen bei solchen Animationstechniken, ansonsten ist es eigentlich alles ganz einfach. Eine kleine Besonderheit sollte Sie noch beachten, es kann sein, dass Sie ein Objekt erstmal initialisieren müssen und interessanterweise werden einige Browser eine Initialisierung über eine CSS-Datei nicht akzeptieren, dann hat diese Eigenschaft Top oder Left zum Beispiel den Wert Leerstring, also 0, deswegen macht man so etwas am besten auch schon direkt über das Styleobjekt. Zum Beispiel in einer Initialisierungsfunktion, um es zusammenzufassen, Sie können über das Styleobjekt jetzt Animationen bauen und natürlich auch einfache DHTML Effekte und wenn Sie dann noch den Timer mit setTimeout und ins Spiel kriegen, dann wissen Sie eigentlich alles, was Sie brauchen um die eindrucksvollsten Animation zu erstellen, die sich vorstellen können.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!