So Fügen Sie Einer Website Eine Animation Hinzu

Inhaltsverzeichnis:

So Fügen Sie Einer Website Eine Animation Hinzu
So Fügen Sie Einer Website Eine Animation Hinzu

Video: So Fügen Sie Einer Website Eine Animation Hinzu

Video: So Fügen Sie Einer Website Eine Animation Hinzu
Video: Eigene Website Page Load Animation erstellen | Webdesign lernen 2024, Kann
Anonim

Animierte Bilder ziehen die Aufmerksamkeit der Website-Besucher mehr auf sich als statische. Diese Bilder liegen im GIF- und SWF-Format vor. Einige moderne Browser unterstützen auch SVG-Animationen.

So fügen Sie einer Website eine Animation hinzu
So fügen Sie einer Website eine Animation hinzu

Anleitung

Schritt 1

Die Wahl des Formats für das animierte Bild basiert auf Ihren eigenen Fähigkeiten. GIF- und SVG-Animationen können mit kostenlosen Programmen (GIMP bzw. Inkscape) erstellt werden, während Sie für ein animiertes SWF-Applet das kostenpflichtige Adobe Flash-Softwarepaket verwenden müssen (nicht zu verwechseln mit dem kostenlosen Adobe Flash Player). Beachten Sie auch, dass GIF-Animationen in fast allen Browsern angezeigt werden können, mit Ausnahme einiger mobiler, SWF-Format - nur mit installiertem Flash Player und SVG-Format - nur in modernen Browsern, hauptsächlich für Desktop-Computer.

Schritt 2

Wenn Sie kein animiertes Bild selbst erstellen möchten, nutzen Sie die Dienste einer der kostenlosen Bilddatenbanken. GIF-Animationen finden Sie beispielsweise auf der AnimatedGifs-Website, SWF auf der Free Flash Animations-Website und SVG auf der Wikimedia Commons-Website in der Kategorie Animated SVG. Beachten Sie die Lizenzbedingungen, wenn Sie Bilder der Öffentlichkeit zur Verfügung stellen.

Schritt 3

Um ein animiertes GIF-Bild in eine Webseite einzufügen, verwenden Sie HTML-Code ähnlich dem, der zum Einfügen statischer Bilder verwendet wird. Wenn sich das Bild im selben Serverordner wie die HTML-Datei befindet, verwenden Sie diesen Code:. Wenn: t es sich in einem anderen Ordner desselben Servers oder auf einem anderen Server befindet, ändern Sie den Code mit dem folgenden Trim:. Fügen Sie SVG-Dateien auf die gleiche Weise ein, mit dem einzigen Unterschied, dass sie eine andere Erweiterung haben: nicht gif, sondern svg.

Schritt 4

Versuchen Sie nicht, eine SWF-Datei mit dem Tag img src einzufügen. Dazu wird das embed-Tag verwendet, und der Code wird spürbar umständlicher: wobei animierteimage.swf der Name der SWF-Datei (bzw kann nach Belieben geändert werden).

Empfohlen: