Javascript: Lake

Warning: filemtime() [function.filemtime]: open_basedir restriction in effect. File(/home/www/web144/html/attachments/059_lake.20081207.zip) is not within the allowed path(s): (/var/www/clients/client396/web1968/web:/var/www/clients/client396/web1968/tmp:/var/www/web144.cyconf.de/web:/srv/www/web144.cyconf.de/web:/usr/share/php5:/tmp:/usr/share/phpmyadmin:/etc/phpmyadmin:/var/lib/phpmyadmin:/usr/share/php:/home/www/web144/html:/home/www/web144/tmp) in /var/www/clients/client396/web1968/web/components/com_attachments/helper.php on line 477

Javascript: Lake

Geschrieben von: Andreas Berger

Samstag, den 19. April 2008 um 07:48 Uhr

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):

<p>Your Browser should show you our Our XYZ-offers.<br />You can show this content here: <a href="/scripts/lake/demo.html">Our XYZ-offers</a>.</p>

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

Version 20081207

- keine absolute Positionierung mehr
- 4 Beispielseiten online
- GPL-lizensiert
- Fehler bei Verwendung einer Doctype-Deklaration behoben

Version 20080501

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	1970-01-01

Zuletzt aktualisiert am Samstag, den 14. Februar 2009 um 09:56 Uhr