Schlagwörterarchiv: 3D-Animation

CSS3-Tricks: 3D-Flip Hover Animation für Serviceboxen

CSS3-Tricks: Coole 3D-Animationen mit Hover-Effekt erstellen

the-cube-service-box

Auf der Webseite von Code My UI habe ich eine interessante Anleitung zur Erstellung von CSS3-Animationen mit tollen Hover-Effekten gefunden.

Die 3D-Flip-Animation können Sie sehr gut auf einem Privat-Portfolio oder auf einer Service-Webseite verwenden, wo Sie mit mehreren Boxen verschiedene Dienstleistungen anbieten können.

Wenn Sie mit der Maus über die 4 verschiedenfarbigen Boxen fahren, rotieren diese mit einem 3D-Flip und zeigen – die zuerst versteckten – zusätzlichen Infos zu Ihren angebotenen Diensten. Entworfen hat das coole Projekt Rahul Dhiman, auf CodePen.io können Sie sein Projekt live bearbeiten und die Hover-Effekte je nach Lust und Laune bearbeiten.

Weiterlesen

2 tolle Beispiele für Augmented Reality

Augmented Reality – Verschmelzen von Realität und virtueller Welt

2 tolle Beispiele für Augmented Reality

Als Augmented Reality wird die Kombination aus realer und virtueller Welt genannt. Das besondere an Augmented Reality ist nicht nur die Kombination, sondern dass man diese interaktiv in Echtzeit erleben kann.

Eine Kamera (z.B. eine Webcam) erfasst dabei visuelle Marker, an dieser Stelle wird dann ein dreidimensionales Objekt generiert. Natürlich nicht tatsächlich auf der Printseite, sondern auf dem Display bzw. dem Bildschirm oder einer Spezialbrille, durch welche die Seite betrachtet wird. Der visuelle Marker kann auch an Autos, Häusern, T-Shirts, Plakaten oder Schaufenstern angebracht sein.

Ecomagination.com – 2 Beispiele für 3D-Animation

Auf der Webseite von Ecomagination.com habe ich 2 tolle Beispiele für diese neue Technologie gefunden. Ich möchte Ihnen einleitend meine beiden daraus resultierenden Videos vorstellen; daran anschließend können Sie in der Anleitung die Entstehung der beiden 3D-Animationen nachverfolgen.

Erläuterungen zu den 2 Videos

In meinen beiden Videos halte ich jeweils ein Blatt Papier vor die Webcam. Darauf zu sehen sind eigentlich nur ein schwarzer Kreis sowie die Silhouette einer Solarzelle in einem schwarzen Quadrat. Auf dem Bildschirm aber entfaltet sich plötzlich eine kleine 3D-Landschaft mit Windrädern, Bäumen, einem kleinen Männchen und einer Brücke im Hintergrund (Video 1) und eine 3D-Wüstenlandschaft mit einer Solar-Anlage, Kakteen, einem kleinen Männchen und fliegenden Vögeln im Hintergrund (Video 2).

Damit aber nicht genug, über dem Ganzen scheint auch noch eine virtuelle Sonne. Wie ich das Papier auch bewege, die Landschaft dreht und wendet sich mit. Erst wenn ich das Bild nicht mehr vor die Linse der Webcam halte, klappt sie sich wieder ein und verschwindet.

Video 1: Holographische Windmühle – Smart Grid Windmill

Video 2: Holographisches Solar Panel – Smart Grid Solar Energy

Experiment nachmachen – Anleitung

Wie genau funktioniert nun das Experiment? Gehen Sie dafür bitte auf die Webseite Ecomagination | Augmented Reality und befolgen Sie dort die (englischsprachigen) Anweisungen.

1. Vorlage ausdrucken

In der Rubrik ‚Getting Started‘ müssen Sie sich zuerst den ‚Solar Panel Marker‘ (Format: A4) ausdrucken (Punkt 1).

2. Webcam einschalten

Danach nur noch den Ton und gegebenenfalls die Webcam einschalten, eine von zwei Landschaften (Wind Turbine, Solar Energy) auswählen und zu guter Letzt dem Programm den Zugriff auf Ihre Webcam erlauben.
.
3. 3D-Landschaft generieren

Halten Sie nun das Blatt Papier mit dem ‚Solar Panel Marker‘ direkt vor Ihre Web-Cam, erscheint entweder die 3D-Landschaft mit den Windrädern oder eine 3D-Wüstenlandschaft mit Kakteen und einer Solaranlage (abhängig von Ihrer Wahl)