Artikel-Hilfsmenü
Mittwoch, 20. März 2019 – aktualisiert am Freitag, 30. Oktober 2020
Alles ist animiert
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
- Screencast vom iPhone Das Video zeigt, wie mit dem animierten Hamburger-Button das Navigationsmenü auf- und zugeklappt wird.
Hab' ich es zu weit getrieben? Nicht nur der Hamburger-Button ist animiert, sondern auch das Auf- und Zuklappen der Navigation (Letzteres dank jQuery).
Aber darum soll es heute nicht gehen. Vielmehr will ich kurz beschreiben, wie ich das "animierte GIF" auf dieser Seite gebastelt habe.
Making of
Screencasts vom iPhone: Das war früher nur relativ aufwendig mit dem QuickTime-Player machbar, oder mit speziellen Apps. Seit iOS 11 geht das ganz bequem mit Bordmitteln.
Das Ergebnis ist ein Video im m4v-Format, das aber zur Veröffentlichung auf einer Webseite jedenfalls nachbearbeitet werden muss.
Die eierlegende Wollmilchsau zur Video-Nachbearbeitung für diesen Zweck ist das kostenlose Handbrake.
Beschneiden (crop), Bildgröße verändern (resize), Trimmen, Audio-Spur entfernen, Ausgabeformat wählen … all dies zusammen in einer App habe ich nur bei Handbrake gefunden.
Und das Ergebnis ist überzeugend: Im vorliegenden Fall hat Handbreak den 20 MB schweren Screencast auf 380 kB eingedampft, eine Reduzierung um 98 Prozent!
Nun nur noch aus dem Video eine selbststartende Endlosschleife basteln mit dem Look & Feel eines GIF. Fertig.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.