Interaktiver Foto-Tisch mit jQuery und CSS3

Interaktiver Foto-Tisch mit jQuery und CSS3

• WAM
• Inspiration Webdesign
• Freitag - 2 . Juli . 2010

Auf der Seite von „tympanus.net““ codrops“ haben wir die absolute Konkurrenz für Flash gefunden. Was hier mit J-Query gemacht wurde, war vor einigen Jahren, nur mit Flash möglich. Hier die Übersetzung des Beitrags von CODROPS: „In diesem kleinen Experiment haben wir einen interaktiven Fotoschreibtisch, der einige “realistisch” Interaktionsmöglichkeiten für die Benutzer, bereitstellt. Die Idee ist es, einige Fotos auf einer Oberfläche zu haben, die gezogen und abgelegt, gestapelt und gelöscht werden können, jede Aktion, die ähnlich der realen Welt.

Zum Beispiel: Wenn wir ein Bild ziehen, wird es zunächst ein bisschen größer erscheinen, da es näher an uns wäre. Lassen wir das Bild wider los wird es wieder in einer zufälligen Drehung zurückgeworfen. Beim Anzeigen aller Fotos werden alle Bilder auf einen Stapel gelegt und dann in groß anzeigt. Klicken Sie auf „nächstes Bild, wird das angezeigt wieder in die Ausgangsposition zurückgeworfen . Beim Löschen eines Bildes wird ein geknittertes Papier auf dem Tisch gezeigt. Wenn Sie die Shuffle-Funktion verwenden, werden die Fotos gedreht und über dem Schreibtisch zufällig verteilt.

Sie können den Quellcode dieser herunterladen und mit ihm experimentieren. Es gibt noch viel mehr Möglichkeiten zu entdecken.

Wir verwenden zwei wichtige jQuery Plug-ins:

1.2D Transform zum Animieren von Rotationen und

2.Shadow-Animation zum Animieren des Box-Schattens.

Die Bilder stammen aus der Fotoreihe von Tibchris auf Flickr.

Die Drehung funktionierte mit dem IE nicht wirklich gut (obwohl es grundsätzlich sollte). „

Dieses Tool ist wirklich unglaublich.

IM BEZUG:

• JQuery Zoom Effekte zum Nachbauen
• Vertikales bewegliches Info Panel
• Die 10 Besten Bild und Content Slider auf jQuery Basis