swfIR - Image-Effekte mit Flash und JavaScript
swfIR (swf Image Replacement) bietet die einfache Möglichkeit, einzelne oder alle Bilder auf Webseiten mit Effekten wie Schlagschatten, runden Ecken, Drehungen und Rahmen zuversehen und ist als Bereicherung der etwas limitierten Effekte von CSS gedacht. Das Ganze basiert auf zwei Dateien, einem JavaScript welches im HEAD-Bereich der Website eingebunden wird und einem Flash-File, das für die Umsetzung der Effekte verantwortlich zeichnet.
So soll es sein: Bei aktiviertem JavaScript lassen sich mit swfIR tolle Effekte erzielen (links). Ist JavaScript nicht verfügbar, wird die Webseite normal dargestellt (rechts).
Erwähnenswert dabei: Das Effekt-Paket kommt zeitgemäß unobtrusive daher, d.h. das eigentliche (X)HTML/CSS bleibt unangetastet und somit valide. Die Veränderungen werden erst nach dem Laden der Webseite per DOM-Manipulation vorgenommen und falls der Surfer JavaScript deaktiviert hat, werden die Bilder und Grafiken eben ganz normal dargestellt. Oder anders ausgedrückt:
Don’t break the rules. Just give ‘em some depth.
Hinter dem Projekt stehen drei Webdesigner des bekannten Happy Cog Studios, an swfIR arbeiten sie aber in ihrer Freizeit und so ist das Ganze natürlich frei erhältlich und kostenlos. Erinnert nicht nur vom Namen her ein bißchen an sIFR.
Artikel: swfIR - Image-Effekte mit Flash und JavaScript
Datum: Wednesday, 28. February 2007, 13:21 Uhr
Kategorien: Webdesign
Feed zum Beitrag: RSS 2.0 · Trackback: Trackback-URL
Diesen Artikel kommentieren.
Journal (Artikel)
28. February 2007
@ 16:30
Sehr schön. Das werd ich mir mal genauer anschauen wenn ich meine Seite umbaue. :D
28. February 2007
@ 17:17
hammer! werde ich auch gleich mal ausprobieren
aber mal ne frage – kann man damit denn auch dinge im theme verändern?
also meine sidebar mit diesem effekt ausstatten?
28. February 2007
@ 22:58
Benji, ich bin auf Dein neues Design gespannt. :)
Jared, ich glaube das geht nicht, denn die Effekte lassen sich wohl nur auf Grafiken anwenden. Die einzige Möglichkeit wäre, daß Du eine Grafik hinter die Sidebar legst und dann diese mit swfIR bearbeitest.
1. March 2007
@ 08:34
hm nur irgendwas mach ich falsch! oder ich versteh den 4ten schritt einfach nich! der code im header ingefügt aber mit dem codeschnipsel im post werd ich nich eins..
1. March 2007
@ 09:15
Ich versuch mal eine Testseite einzurichten vielleicht hilft Dir das?
1. March 2007
@ 19:05
ja klar würd mir das helfen ;)
2. March 2007
@ 19:53
John … ich auch :p
2. March 2007
@ 20:19
Okay, ich setz mich mal am Wochenende ran.
5. March 2007
@ 19:31
wär echt nett! ich komm da nicht weiter…
würdest du uns bescheid sagen?
ich mach irgendwas beim ausgabe code falsch!
sonst ist alles in den ordnern und auch im header definiert
java ist auch an
grml
8. March 2007
@ 16:18
Wow, meine Träume sind erfüllt, das mit dem “Rotate” und “Shadow” ist das geilste!
@Jared: Java != JavaScript
8. March 2007
@ 21:56
Hatte mit der Ausgabe auch so meine Problemchen, bei mir lags daran, dass die Bilder von einem anderen Server geholt wurden, was mit Flash aus Sicherheitsgründen nicht geht. Vielleicht ist’s bei dir ja das gleiche Jared
13. March 2007
@ 18:31
oh entschuldige! ich meinte javascript
ne also die bilder liegen ganz klar auf meinem server
@jowra
kannst du vllt den code posten? also den vollständigen code im beitrag damit das bild erscheint? damit scheine ich probleme zu haben :(
23. March 2007
@ 17:46
Ich habs beio Jeriko entdekct und nun auch ein bisschen damit gespielt, ist ja echt ne nette Sache! Ich habe auch eine kleine Testseite eingerichtet ;-)
27. April 2007
@ 14:26
Nimmst du dieses jahr eigentlich wieder am CSS-Reboot teil? In letzter Zeit ist es hier so still, da könnte man meinen, du seist zur Zeit beschäftigt … ;-)
28. April 2007
@ 20:42
Ich bin äußerst beschäftigt, in gewisser Weise auch mit einem CSS-Reboot, aber nicht von meiner Seite. ;-)
Ansonsten ist momentan zu viel RL, keine Zeit für die Seite. Aber es geht weiter, keine Frage.
30. April 2007
@ 16:12
Sehr gut was von dir zu lesen, dachte schon man müsste sich Sorgen machen… Gut dann freu ich mich auf die nächsten Beiträge :)
Hau rein!
10. November 2007
@ 15:24
Hallo Leute, bin über Google auf die Seite hier gestoßen, da ich auch etwas mit swfIR rumgespielt habe. Mein Problem dabei ist allerdings, dass er mir Bilder, die ich drehe und mit einem Rahmen versetzt habe, einfach oben und unten abschneidet. Auch ne height Angabe hat mir da nichts genützt. Habt ihr schon mehr Erfahrungen oder ne Idee wie man dieses Problem umgeht?