Animiertes Karten-Layout mit Flip-Funktion

jQuery Tip Cards
Kommentare

Google zeichnet sich ja generell durch sein einfaches aber effektives UI aus, so auch bei Google Tips – einer Ansammlung von Karten, auf denen verschiedene Tips stehen. Gefällt mir ein Thema, klicke

Google zeichnet sich ja generell durch sein einfaches aber effektives UI aus, so auch bei Google Tips – einer Ansammlung von Karten, auf denen verschiedene Tips stehen. Gefällt mir ein Thema, klicke ich die Karte an und drehe sie damit um. Auf der Rückseite finde ich dann weiterführende Informationen.

Und genau dieses Szenario kann man mit dem jQuery-Plug-in Tip Cards für die eigene Website nachbauen. Tip Cards ist kompatibel für Chrome, Firefox und Safari. Entwickler Pete R. hat es jedoch nicht für den IE getestet.

Neben dem in der Demo gezeigten Layout gibt es zusätzliche Animationsmöglichkeiten, um die eigenen Tip Cards etwas persönlicher zu gestalten. Informationen, wie ihr Tip Cards nutzen könnt, findet ihr auf GitHub. Ein ausführliches Tutorial soll folgen.

Tip Card auswählen und anklicken

Die geflippte Karte mit Informationene Screenshots: http://www.thepetedesign.com/demos/tip_cards_demo.html

Aufmacherbild: Playing cards in poker isolated on a white background von Shutterstock / Urheberrecht:Dmitrydesign

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -