Apple TV UI 3D Bildeffekt nachmachen – Sag hallo zu atropos.js

Schöner 3D Bildeffekte mit atropos.js

Es ist gar nicht so einfach, diesen Effekt zu beschreiben, daher gibt es gleich ein GIF. Nur so viel: Auf Facebook sieht man oft diese Bewegtbilder, wo man mit der Maus hin und herfahren kann und das Bild bewegt sich mit.

Beim AppleTV gibt es für die Vorschaubilder auch so einen Effekt. Diesen hier:

 

Der Autor beschreibt atropos.js als „a stunning touch-friendly 3D parallax hover effect.“

Also einen atemberaubenden 3D-Parallax-Hover Effekt, der auch auf Touchscreens funktioniert.

Also das GIF oben erklärt es eindeutiger.

Anyway, ein sehr interessanter Effekt, den ich über
Timo Ernst gefunden habe. Er hat auch ein schönes Video dazu gemacht. Die Demodaten finden sich hier https://github.com/valnub/atropos-demo

Colorbox – eine jQuery Lightbox

Colorbox ist eine oft empfohlene und umfangreiche Lightbox.

Screenshot der Seite zu Colorbox
Screenshot der Seite zu Colorbox

Die Library ist nur 10KB groß, wenn man die Daten komprimiert sogar nur 5KB.

Beispiele findet man hier: https://www.jacklmoore.com/colorbox/example1/

Hooks und Callbacks

Einer der wichtigsten Dinge in der Webentwicklung bei solchen Librarys sind Hooks und Callbacks.

Weil Lightboxen oft nicht nur zum stupiden Anzeigen von Bildern und Inhalten benötigt wird, sondern oft in umfangreiche Funktionalitäten eingebaut wird.

Daher werden Funktionen benötigt, um Usereingaben auch in der Lightbox zu triggern, und das ist bei Colorbox möglich:

Mehrsprachigkeit

Will man die Texte/Beschriftung ändern, so ist das easy möglich:

Zeigt die Einstellungen zur Mehsprachigkeit

 

Mehr vom Autor von Colorbox kann man hier einsehen: