Kategorien
Netzwelt

Animierte Bilder mit Farbeffekt

Im Smashing Magazine gab es gestern einen Beitrag zu interaktiven CSS / jQuery Techniken, darin war ein Beispiel zu animierten Hintergrundgrafiken / Bildern enthalten, welches ich ziemlich faszinierend fand und direkt ausprobieren – nachbauen musste. Wie ich finde ein sehr gelungener Effekt, mit dem allerhand anstellen kann. Hier ein kurz Review mit Anleitung auf Deutsch und Beispielen.

##Durch ein Theme Update ist die Demo leider broke, da einige Codezeilen eingebettet waren.##

1. Beispiele – Demo

Logo Orange
Knockout Image

Mauszeiger über das Symbol halten und die Farbe ändert sich.

Logo Blau
Knockout Image

Mit blauem Farbeffekt.

.

2. Wie funktioniert das?

Wie funktioniert das Ganze nun? Den Code dazu gibt’s auf Smashing Mag, siehe Links unten, deshalb hier nur kurz eine Erläuterung zum Einbau des Effekts zum animieren von Bildern (wobei es nicht direkt animierte Bilder sind, sondern nur der Farbeffekt animiert wird). Man benötigt auf jeden Fall  ein PNG Bild mit Transparenz – sprich, wie im Beispiel oben ist das “G” in der Farbe Weiß und der Kreis rundherum ist transparent. Deshalb erscheint die Farbe, welche man in der CSS festgelegt hat, hier Grau, als Hintergrund. Beim Hover-Effekt wählt man nun die Farbe aus, welche beim Mouseover erscheinen soll – et voilá fertig ist ein schöner Effekt.
Um das CSS nicht unbedingt Page-wide einzusetzen, habe ich hier für mit Benutzerdefinierten Feldern in WordPress gearbeitet, so dass der CSS-Code nur auf dieser Seite erscheint. Dies lässt sich natürlich auch global lösen, aber ich denke zum Zwecke der Demonstration reicht es hier lokal auf der Artikelseite.

Ich könnte mir dafür noch interessante Anwendungen, wie beispielsweise bei Fotos mit transparenten Bereichen vorstellen – etwa eine Sonne oder Wolken, die beim Hover leuchten – das werde ich demnächst eventuell mal testen. Auf jeden Fall ein schöner Effekt, der sich mit relativ wenig Aufwand realisieren lässt.

3. Code

Da ich den Code etwas angepasst habe hier mein Beispiel, aber den Original Code kann man sich beim Smashing Magazine anschauen. Für das CSS habe ich für die jeweilige Farbe eine Klasse definiert und die entsprechende Mouseover Hintergrundfarbe. [bin kein CSS Fachmann, sondern eher Bastler, von daher gibt es sicherlich ‘cleanere’ Lösungen]

CSS

<style type="text/css">

.xpost-image, .xpost-image2 {    float:left;
    background-color: #bbb;
    -webkit-transition: background-color 400ms ease-in;
    -moz-transition: background-color 400ms ease-in;
    transition: background-color 400ms ease-in; }

.xpost-title, .xpost-title2 {    color: #037072;
    font-size: 2em;
    font-weight: normal;     padding-bottom: .3em;
       cursor: pointer;     -webkit-transition: color 400ms ease-in;
    -moz-transition: color 400ms ease-in;     transition: color 400ms ease-in;}

/* add the hover states */
.xpost-title:hover {    color: #FF0000;}
.xpost-title:hover .xpost-image {    background-color: #FF0000;}
.xpost-title2:hover {    color: #2090C5;}
.xpost-title2:hover .xpost-image2 {    background-color: #2090C5;}
</style>

HTML
Hier habe ich alles, was nicht benötigt aus dem Original Beispiel entfernt und übrig bleibt folgende einfach Codezeile. “DEINE IMG URL” noch mit der entsprechenden Bilddatei auffüllen und fertig.

<h2 class="xpost-title">Logo Orange
<img class="xpost-image" title="This is a knockout PNG" src="DEINE BILD URL" alt="Knockout Image" width="183" height="185" /></h2>
Mauszeiger über das Symbol halten und die Farbe ändert sich.

jQuery sollte natürlich noch by default mit laufen, aber ansonsten wäre der Effekt binnen 5 Minuten erstellt. Ein Bildbearbeitungsprogramm, wie etwas GIMP zur Hand, ein paar Buchstaben ausschneiden, bzw. ein Bild mit transparenten Bereichen erstellen und fertig.

Viel Spass beim Testen!

Nachtrag:

Da ich für die Überschrift ‘animierte Bilder’ verwendet habe, weil der Effekt als solcher im Magazin auf Englisch verwendet wurde, hier noch eine Ergänzung, für einen wirklich gelungen Effekt für Animationen in Bildern mittels simple animated GIFs:

Quelle: NYC Photographer Jamie Beck- So tasty! Tomatoes via http://fromme-toyou.tumblr.com – animierte Tomate Gif

Und last but not least, das non plus ultra in Sachen animierte Bilder, finde ich das Bild vom gegrillten Steak auf cinemagraphs.com/food. Man muss etwas warten, bis die Seite komplett geladen ist, aber das lodernde Feuer ist schon mal ein Effekt der richtig Eindruck macht!

Webdesign macht’s möglich – werd’ mir gleich 1 kg Fleisch bestellen 🙂

Smashing Magazin – CSS/jQuery Farbänderung (mit Code für den Farbeffekt mit CSS  von oben)

Sammlung von animierten GIFs
Animierte Bilder als Kunstform – Cinemagraph

Jede Menge weiterer Cinemagraphs auf Superwhite.CC