Scrolling Layer Code: Information and Examples

This example document contains information about setting up the layers, setting up multiple scroll areas, etc. More information about setting up links, scrollbars and other aspects of the code can be found online.

Mouseover Scrolling Examples:

Glide Onclick Examples:

Other Examples:

The example documents all import their style sheets so that incapable browsers will see the content rendered in the normal flow. The style sheet for each example has the same file name (with a css extension, of course) as the html document that uses it.

There is generally no need to edit the external JavaScript files. Work from the example document that most closely resembles your desired implementation, using it as a template. If you want to place all the code for your document in a single external JavaScript file, that's fine. Just be sure to include one copyright notice in full at the top of that file.

Note: Style sheets used by the example documents typically contain at least a few style specifications that are not directly related to scrolling layers. A notable example, taken from scroll-rel.css:

/* Styles for demo, not necessary for scrolling layers */  
body { overflow:hidden; text-align:center }

So, obviously, if your implementation will require regular window scrollbars, and if you do not wish all your document content to be centered, then you would need to remove these specifications.

Please read dyn-web's Terms of Use if you plan to use the code. Licenses for commercial use of the code include implementation assistance.

 

www.dyn-web.com