Interaktiver Foto-Tisch mit jQuery und CSS3

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.

intro_image_interaktiv_new

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.

demo Download

Technorati-Tags: ,,

IM BEZUG:

Eine Antwort auf Interaktiver Foto-Tisch mit jQuery und CSS3

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Get our toolbar!