In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Mini-Cartoon mit Mediaqueries
Aufgabe: Gestaltung einer Arbeit unter Verwendung der im Unterricht besprochenen Techniken (z.B. HTML, CSS, Javascript, Responsive, Animation). SIe soll den Umfang einer Hausaufgabe überschreiten, interaktiv sein und eine gestalterische Aussage machen, dabei aber nicht angewandt sein.
©Corvin Weber
Während der Nutzer sein Browserfenster vergrößert, wird eine Frame-by-frame-Animation abgespielt.
Mit Hilfe von Mediaqueries wird die aktuelle Fenstergröße des Browsers abgefragt. Die Animation wird mit Hilfe von Sprites realisiert. Ändert sich die Breite des Browserfensters, so ändert sich auch die Position des Hintergrund-Sprites und die Animation läuft ab.
Auf Basis dieses Prinzips entsteht ein kleiner Cartoon mit mehreren Sprites.
[Test-Animation](http://interface.fh-potsdam.de/Users/web_basics/Corvin%20Weber/111214_ha_anitest.html „Test-Animation“) (Verkleinere und vergrößere das Browserfenster, um die Animation abzuspielen.)
©Corvin Weber
Bei der Frame-by-Frame-Animationen kommen verschiedene CSS-Sprites zum Einsatz.
Zieht der Nutzer das Browserfenster auf, verschiebt sich das Bild, so dass der nächste Zustand der Animation angezeigt wird. Die anderen Zustände sind dabei unsichtbar, da der umschließende DIV-Container groß genug ist, um einen Zustand anzuzeigen.
©Corvin Weber
Die Mediaqueries werden in diesem Fall nicht dazu verwendet, um die Darstellung eines Layouts für verschiedene Geräte anzupassen. Stattdessen übernehmen sie die Funktion der Frames bei der Animation.
Die Fenstergröße wird 91 mal abgefragt, so dass 91 Frames für die Animation zur Verfügung stehen.
©Corvin Weber
[Mini-Cartoon anschauen](http://interface.fh-potsdam.de/Users/web_basics/Corvin%20Weber/111214_ha_mini-cartoon-einstieg.html „Mini-Cartoon anschauen“)
Ein Projekt von
Corvin Weber
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
Entstehungszeitraum
Wintersemester 2011 / 2012