Main Menu
Most Read
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

If you like the products on these pages, your support is highly appreciated. Thank you very much!

Amount: 

Latest Items
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
Warning: 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
Written by Andreas Berger   
Saturday, 19 April 2008 07:48

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:

Windows Mac OSX Linux FreeBSD
MSIE Internet Explorer
6
MSIE Internet Explorer 7.0 J
MSIE Internet Explorer 8
FireFox Firefox
2.0.0.16 J
FireFox Firefox
3.0.1 J
Opera Opera
9.25 J
Safari 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:
FileLast Modified
Download this file (lake.20081207.zip) lake.20081207.zip1970-01-01
Last Updated on Saturday, 14 February 2009 09:56
 
English
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 68 guests online