bretteleben.de JavaScript Lake - Updated 20081207!

The JavaScript "lake" results from my attempt to replace a - used with a former version of my private homepage - Java Applet from David Griffith with JavaScript.

Because i was not able to find such a script - i decided to write one on my one.

Display:

The result is not exactly what i wanted to achieve and does not reach the original, but it offers at least similar functionality. One may ripple the lower part of a picture, mirror the upper part of the image about a virtual waterline, underlay a second picture to shimmer through the water or overlay the picture with a - partial transparent - picture.

Functionality:

To simulate a waved surface, the affected part of the image is divided in slices with a height of 1 pixel. This is done, using the css feature clip:rect, which leaves visible only a certain part of a div-container.
These slices get - following a curve - deflected to the left and the right and this way create the illusion of moving waves.
Thanks to two FOR-loops this is done with only a few lines of code.

Installation and Configuration:

The integration into the web page and the configuration of the parameters is illustrated in detail on the following four sample pages:

Lakescript Sample 01 - standard configuration
Lakescript Sample 02 - mirroring the upper part of the image
Lakescript Sample 03 - mirroring the upper part of the image plus using an underlay
Lakescript Sample 04 - using an overlay

Demo:

Sample (displayed within an iframe):

Browser-compatibility:

The JavaScript is till now tested as follows:

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

License

The script is licensed under the GNU Public License (www.gnu.org/copyleft/gpl.html).

update Version: 20081207

Version 20081207

- absolute positioning is no more required
- License for further Releases GNU/GPL
- 4 Sample-Pages online
- now works proper with a Doctype-Declaration

Version 20080501

Miscellaneous

I am happy about everybody who gives me a link back to www.bretteleben.de on his website, this way helping me to popularize the script. The JavaScript "lake" is till now listed in different JavaScript - resources, including the largest - as far as i know - JavaScript resource: HotScripts.

If you have questions or suggestions about this JavaScript, please use the comment-function. Records about the behavior of this script with further browsers/operating systems would be appreciated.

Download

The ZIP-archive contains a demo-page. By downloading it you agree to the terms of the GNU Public License.

Downloads:

File	Last Modified
lake.20081207.zip	2008-12-07