bretteleben.de JavaScript Lake - Updated 20081207!

Das LakeScript entstand in dem Versuch, ein - auf einer älteren Homepage eingesetztes - JavaApplet von David Griffith mit JavaScript zu ersetzen.

Da sich ein derartiges Javascript im Web nicht finden ließ, griff ich notgedrungen zur Selbsthilfe.

Darstellung:

Das Resultat entspricht optisch zwar nicht ganz dem Original, bietet aber zumindest ähnliche Funktionalität. Man hat die Möglichkeit, den unteren Teil eines Bildes mit einer Wellenbewegung zu animieren, alternativ dazu den oberen Teil eines Bildes über eine gedachte Wasserlinie nach unten zu spiegeln, den gespiegelten Teil mit einem zweiten Bild zu hinterlegen oder das Bild mit einem - teils transparenten - Gif zu überlagern.

Funktionsweise:

Um die Optik einer sich bewegenden Oberfläche zu simulieren wird der betroffene Bereich des Bildes in 1 Pixel hohe Streifen aufgeteilt. Das funktioniert über die Eigenschaft clip:rect, mit der von einem DIV-Container nur ein bestimmter Teil sichtbar bleibt.
Diese Streifen werden - eine Kurve folgend - seitlich ausgelenkt und erzeugen den Eindruck einer Wellenbewegung. Dank zweier FOR-Schleifen ist das Ganze mit wenigen Zeilen Code zu bewerkstelligen.

Einrichtung und Konfiguration:

Die Einbindung in die Seite und die Verwendung der einzelnen konfigurierbaren Parameter sind auf vier Beispielseiten ausführlich erklärt:

Lakescript Beispiel 01 - Standardkonfiguration
Lakescript Beispiel 02 - Spiegelung des oberen Teils eines Bildes
Lakescript Beispiel 03 - Spielgelung des oberen Teils plus Unterblendung
Lakescript Beispiel 04 - Verwendung einer Überblendung

Demo:

Beispiel (in einem Inline-Frame angezeigt):

Browserkompatibilität:

Das Javascript ist bislang wie folgt getestet:

Internet Explorer	6
Internet Explorer	7.0	J
Internet Explorer	8
Firefox	2.0.0.16	J
Firefox	3.0.1	J
Opera	9.25	J
Safari	3.11	J

Lizenz

Das Script ist unter der GNU Public License (www.gnu.org/copyleft/gpl.html) lizensiert.

aktuelle Version: 20081207

Sonstiges:

Wenn jemand Gelegenheit findet, auf seiner Webseite einen Link auf www.bretteleben.de zu setzen, dann freut mich das natürlich, weil es mithilft, das Script bekannter zu machen. Bislang ist das Javascript "lake" in verschiedenen JavaScript - Resourcen verlinkt, darunter auch dem größten mir bekannten JavaScript - Archiv: HotScripts.

Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung, auch Berichte über Erfahrungen mit anderen Browsern/Betriebsystemen sind immer willkommen.

Download

Das ZIP-Archiv enthält eine Beispielseite. Mit dem Download erklären Sie sich mit den Bestimmungen der GNU Public License einverstanden.

Downloads:

Datei	Zuletzt bearbeitet
lake.20081207.zip	2008-12-07