Lupe mit Kamerafunktion

Ein jQuery-Beispiel aus der Kategorie Fingerübungen. In dieser Kategorie werde ich in unregelmässigen Abständen Code-Schnippsel oder Mini-Applikationen veröffentlichen die es wahrscheinlich nie zu eigenen Projektstatus schaffen werden, aber trotzdem einige Aspekte enthalten die es Wert sind aufgeschrieben zu werden.

Dieses kleine Demo ist ein gutes Beispiel für die Ausdruckskraft von Javascript in Kombination mit jQuery.

Interessant an der Umsetzung ist der Fakt das keinerlei Pixel berechnet werden, es wird nicht mit Canvas oder Image-Transformationen gearbeitet, sondern einfach ein DIV-Tag clever mit CSS kombiniert. Die Basisideee (die nicht von mir ist) besteht darin die CSS-Property background-position dieses DIV-Tags zu manipulieren. Außerdem wird das quadratische DIV-Tag mittels der CSS-Property border-radius „Rund“ gemacht.

Alles was Sie in diesem Demo sehen ist mit 77 Zeilen Javascript erledigt. Dazu kommen noch 20 Zeilen HTML und 60 Zeilen CSS.

1 Kommentar

  1. Der Animator hat wieder zugeschlagen! Wenn jemand optisch ansprechende Javascript-Beispiele zaubern kann, dann du. Nur wo sind die Pinguine? 😉

    Ich finde es immer wieder faszinierend, dass etwas, das so einfach ist, einen so großen Effekt bringt.

Schreib einen Kommentar