Mit Hilfe von CSS3 und jQuery können Sie Ihre Fotosammlung in effektvoller Weise als Polaroid darstellen lassen. Das hier vorgestellte Beispiel mischt die einzelnen Polaroids beim Start der Seite nach einem Zufallsprinzip und stellt diese ungeordnet auf dem Bildschirm dar. Zum Anschauen der Bilder holt man sich diese durch Anklicken in den Vordergrund. Außerdem lassen sich alle Bilder zu einer anderen Position verschieben. Einfach das nachfolgende Video anschauen, um die beschrieben Funktionen zu sehen.
Video zur Polaroid-Darstellung
Nutzen Sie die folgenden Buttons um das Beispiel genauer anzusehen und zu testen oder um das Beispiel herunterzuladen. Mit dem in Download enthalten Dateien können Sie Ihre eigene Polaroid-Seite erstellen.
Nun noch ein paar Innereien zu diesem Script zum besseren Verständnis und zur Variation bestimmter Parameter:
HTML-Datei (index.html)
Innerhalb des body-Tags werden die einzelnen Bilder über das <img>-Tag eingefügt, wobei src den Pfad zum Bild enthält. Innerhalb von <p> schreiben wir den Text, der auf dem Polaroid stehen soll. Das Ganze wird dann von einem <div>-Container eingeschlossen, welcher der Klasse polaroid zugeordnet wird. Es können beliebig viele Bilder in dieser Form hinzugefügt werden.
<body>
<div class="polaroid">
<img src="pics/Schwan_Wald_See.png" alt="Schwan im Waldsee" />
<p>Schwan im Waldsee</p>
</div>
<!-- Mehr Bilder hier -->
</body>
CSS-Datei (style.css)
Unserem <div>-Container hatten wir oben die Klasse polaroid zugeordnet. Hier werden nun die einzelnen Attribute festgelegt, die das Erscheinungsbild bestimmen.
In der ersten Zeile legen Sie Höhe und Breite des Container als absolute Werte fest sowie den Pfad zu dem Hintergrundbild. Das Hintergrundbild ist in diesem Fall die “Polaroid-Maske”. Deshalb müssen Höhe und Breite der Größe der Polaroid-Maske entsprechen. Sie können das Polaroid-Bild auch beliebig austauschen gegen z.B. ein andersfarbiges Polaroid oder wenn eine andere Größe benötigt wird. Erstellen lässt sich eine neue Polaroid-Maske unter anderem mit DA-WebImage.
.polaroid { width:368px; height:376px; background-image:url(../pics/polaroid-bg.png);
position:absolute; }
In der zweiten Zeile ist die Größe der einzelnen Fotos definiert. Es ist zu beachten, dass alle Fotos dieselbe Größe habe. Weiterhin wird mit margin der Abstand von den Rändern so festgelegt, dass das Bild genau in die Polaroid-Maske passt.
.polaroid img { width:335px; height:275px; margin:25px 0 0 15px; }
In der dritten Zeile legen wir die Eigenschaften, wie Ausrichtung, Schriftfarbe, Schriftart, etc. zum Schriftzug unterhalb des Polaroids fest.
.polaroid p { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E;
margin-top:15px; }
jQuery (script.js)
Die Script-Datei stammt von Marco Kuiper und kann dem Download entnommen werden. Hier sind die einzelnen Funktionen enthalten, welche die Animationen, wie das Rotieren und Verschieben der Polaroids bewerkstelligen. Auf eine ausführliche Beschreibung der einzelnen Funktionen verzichte ich an dieser Stelle. Der interessierte Programmierer kann sich die Funktionen in einem entsprechenden Editor; Texteditor ist ausreichend; anschauen.
Zusammenfassung
Es sei noch gesagt, dass CSS3 und HTML5 derzeit noch nicht in allen Browsern vollständig implementiert sind. So kann es beim Beispiel zu unterschiedlichen Darstellungen bei unterschiedlichen Browsern kommen. Das aufgenommene Video zeigt die Anwendung in Chrome. Dort funktioniert alles super. Aber im Mozilla Firefox funktionierte zum Beispiel die Rotation der Bilder nicht.
Comments (1) 
Allgemein, CSS, HTML, JavaScript
| 
3d, Acko, Animations, CSS, Design 
Jetzt fügen wir noch einen Rahmen hinzu:
Themocracy WordPress Themes