Loading...

Interaktiver Foto-Tisch mit jQuery und CSS3 von WAM

Alles Rund um Webdesign, Seo und vielem mehr
Start / Blog - / Interaktiver Foto-Tisch mit jQuery und CSS3

Interaktiver Foto-Tisch mit jQuery und CSS3

2. Juli 2010  WAM 

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

IM BEZUG:

  • JQuery Zoom Effekte zum Nachbauen
  • Vertikales bewegliches Info Panel
  • Die 10 Besten Bild und Content Slider auf jQuery Basis
Geschrieben von WAM
Avatar for WAM
Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

KOMMENTAR (1) “Interaktiver Foto-Tisch mit jQuery und CSS3”

Schreibe einen Kommentar

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

Lassen Sie uns Sprechen