JavaScript: Lake Sample04 |
Written by Andreas Berger |
Sunday, 07 December 2008 10:40 |
Sample 04 uses an overlay. To create it, the areas of the image showing water have been deleted and the file saved as .PNG (able to use transparency). This image overlays the main image, creating the impression, that only the water moves. 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 downoaded 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=180; //"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="overlay.png"; //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. //The sample above uses an overlay called "overlay.png". 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=15; //"steps" defines the height of one wave in pixel. var range=1; //"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=110; //"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:20 |