Wenn ein Bild plötzlich blinzeln soll

Um eine Person auf einem Bild blinzeln zu lassen, muss nicht gleich das gesamte Motiv animiert werden. Schließlich soll sich ausschließlich die Augenpartie verändern, während Gesicht, Haare, Kleidung und Hintergrund unverändert bleiben.

Unsere Lösung basiert deshalb auf zusätzlichen, transparenten Bildelementen. Diese zeigen die Augen in zwei verschiedenen Zuständen: einmal halb geschlossen und einmal vollständig geschlossen.

Die Elemente werden passgenau über den geöffneten Augen des Originalbildes platziert. Eine kleine JavaScript-Steuerung blendet sie anschließend in schneller Folge ein und wieder aus. So entsteht der Eindruck, dass die Person tatsächlich blinzelt.

Dabei kommt es vor allem auf das richtige Timing an. Werden die Augen zu langsam geschlossen, wirkt die Bewegung unnatürlich. Erfolgt der Wechsel zu schnell, ist der Effekt kaum wahrnehmbar.

Auch die Pausen zwischen den einzelnen Bewegungen spielen eine Rolle. Ein Bild, das alle paar Sekunden im exakt gleichen Rhythmus blinzelt, erinnert eher an eine Maschine als an einen Menschen. Deshalb verwenden wir wechselnde Zeitabstände, die den Effekt natürlicher erscheinen lassen.

Während sich die eigentliche Animation vergleichsweise einfach umsetzen lässt, wird die genaue Positionierung der zusätzlichen Bildelemente etwas anspruchsvoller.

Auf einer Website wird ein Bild schließlich nicht immer in seiner ursprünglichen Größe dargestellt. Je nach Bildschirmbreite verändert sich seine Darstellung und damit auch die Position der Augen.

Würden wir die animierten Elemente mit festen Pixelwerten platzieren, könnten sie beim Verkleinern des Bildes plötzlich an der falschen Stelle erscheinen. Das Ergebnis wäre vermutlich eher unfreiwillig komisch.

Deshalb orientiert sich unsere Lösung an den tatsächlichen Proportionen des Bildes. Die Position und Größe der zusätzlichen Augenpartien werden entsprechend angepasst, sodass sie bei einer proportionalen Skalierung an der richtigen Stelle bleiben.

Allerdings gibt es Grenzen: Wird das Bild auf kleinen Bildschirmen stark verkleinert oder anders zugeschnitten, kann die exakte Überlagerung schwieriger werden. In unserer Umsetzung verzichten wir deshalb bei kleineren Bildschirmgrößen bewusst auf die Animation.

Auch die Systemeinstellung für reduzierte Bewegung wird berücksichtigt. Besucher, die Animationen eingeschränkt haben, sehen ausschließlich das unbewegte Originalbild.

Für einen gelungenen Blinzeleffekt braucht es weder eine aufwendige Videodatei noch eine umfangreiche Animationsbibliothek. Ein geeignetes Ausgangsbild, zwei zusätzliche Augenvarianten und eine gezielte Steuerung reichen aus, um eine überraschend lebendige Wirkung zu erzielen.

Das Schöne an solchen Lösungen ist, dass sie sich individuell an die Gestaltung einer Website anpassen lassen. Die Animation steht nicht im Vordergrund, sondern ergänzt das vorhandene Erscheinungsbild um eine kleine Besonderheit.

Natürlich passt ein blinzelndes Porträt nicht zu jeder Website. Aber genau darum geht es bei individueller Webentwicklung: Nicht möglichst viele Effekte einzubauen, sondern Ideen so umzusetzen, dass sie zum jeweiligen Internetauftritt passen.

Nicht jede Idee passt in eine fertige Vorlage. Manchmal sind es gerade die kleinen, individuellen Details, die eine Website besonders machen und bei Besuchern in Erinnerung bleiben.

Du hast eine bestimmte Vorstellung, weißt aber noch nicht, ob oder wie sie sich technisch umsetzen lässt? Erzähl uns davon! Wir entwickeln individuelle Lösungen, die zu Deinen Wünschen, Deiner Website und Deinen Besuchern passen.