JavaScript: Lake Sample01 |
Written by Andreas Berger |
Sunday, 07 December 2008 10:36 |
The first sample shows the most common use of the script. A part of an image gets rippled. The file names "lake.html" and "lake.js" correspond with the file names in the sample that comes with the download of the script at JavaScript: lake. The following explanatory notes also refer to these files and show how to integrate the script from the HTML-page and set the parameters in the downloaded JavaScript lake.js. lake.html - the pageThe first step always is to reference the script from the HEAD section of your page: <script language="JavaScript" type="text/javascript" src="lake.js"></script> The sample assumes that the script is located in the same directory as your page, otherwise the path has to be adjusted. <div id="lake" style="margin:25px;"> <img src="image.jpg" style="width:400px;height:267px;" /> </div> That´s all as far as the webpage is concerned. lake.js - the scriptfileNow we adjust the parameters in the scriptfile "lake.js" to fit our needs. The sample shown above uses the following setting:
//*****parameters to set***** var divid="lake"; //The parameter "divid" points to the div-container to display the image. var imagea='image.jpg'; //The path to your image. var pwidth=400; //Set this to the width of your image in pixel. var pheight=267; //Set this to the height of your image in pixel. var wavetop=108; //"wavetop" defines where to start the waves //measured from the top of your image (in pixel). var wavebot=pheight; //"wavebot" defines the bottom end of the waves //measured from the top of your image (in pixel). //Usually this is the bottom of your image and you will do fine with the default of "pheight". //If you want your waves to end above the bottom end of your image set this to a //value (eg: var wavebot="220";). var reverse=0; //"reverse" defines if the set part of your images gets rippled (0) //or if the above part gets mirrored down (1). //The sample above moves the given part, therefore: reverse=0; var opaz=100; //If you use a second image to shimmer through the waves, //"opaz" defines the transparency. //The values are from 100 (opaque) to 0 (transparent). var underlay=0; //If you use a second image to shimmer through the waves, //set this to the path to your image (eg: var underlay="image2.jpg"). //Otherwise set this to 0. var overlay=0; //If you use a partially transparent overlay, //set this to the path to your image (eg: var overlay="image2.png"). //Otherwise set this to 0. var uwidth=pwidth; //"uwidth" allows to set a different width for the optional //underlay (in pixel). //Usually you will do fine with the default setting. var uheight=wavebot-wavetop; //"uheight" allows to set a different height for the optional //underlay (in pixel). //Usually you will do fine with the default setting. var steps=30; //"steps" defines the height of one wave in pixel. var range=2; //"range" defines the maximum excursion of a wave. //A value of 10 means that the maximum way to the left and //to the right is 10 pixel. //If you have set "reverse" to 1 to mirror down the upper part of //your image, the displayed image gets clipped automatically at both sides //by the value you set for "range" to prevent the background from been seen. var tim=90; //"tim" defines the timeout between to moves in milliseconds. //Setting this too low may cause errors (stack overflow). var autostart=1; //Having set "autostart" to 1 the script starts at pageload. //If you want to start the script by link, set "autostart" to 0 and //integrate a link in your page: //eg: <a href="javascript:firstmove()">start now!</a> //*****nothing more to do, have fun :)
That´s all. The effect you achieve depends beside the choice of the image a lot from the values you set here and you should take the time to experiment with different values. Often a small change creates a large impact. |
Last Updated on Thursday, 26 November 2009 19:19 |