Picnic Website Code Tutorials

The Body Scroller Tutorial

View Demo

This code allows you to add an almost infinite amount of images (or anything else) with out having to adjust the width to suit. It makes use of the entire browser window (the body!), so it's a perfect way to display many large images. It can be used as a pretty cool image gallery, or whatever your imagination desires. Simply add your own images and your done! The ul (images container) will always stay vertically and horizontally centered in the browser window. The captions were added as a nice little touch. The javascript only adds the automatic left/right scrolling effect via the arrows. The structure of the page is done entirely with CSS/HTML. Also, the left/right arrows are in the javascript, so in the absence of JS, the arrows just disappear, and the JS degrades perfectly!

Here is the javascript »
Here is the left arrow »
Here is the right arrow »

Need help adding this or other code to your website? Post it here in the forum! Forum


Top Donators

Friends of Mine