I was trying to write a toy program in Django this morning, something kinda silly and spicy, and one of the things I wanted was a horizontal scrolling special effect, using the animation tools in, say, Dojo or jQuery.
So, the basics.
As I'm using it here, a viewport is a rectangular portion of the HTML display that contains more HTML objects larger than itself, and through which only a portion can be seen at any time. The idea is that you use the viewport to show a given portion, and then use some other form of interaction (drag & drop, or the arrow keys, or buttons/links onscreen, or some other tool) to move the underlying HTML around, exposing different parts of it to the user through the viewport.
In the example, there is a panel, and for my purposes the panel is the same size as the viewport. I want a kind of slideshow. (In order to make sure everything fits, I have a CSS reset line at the top). I've placed an "inner" block, with some color, to let me know that everything's working. In order for jQuery to be able to do positioning math correctly, the viewport must be declared position: relative;
Inside the viewport, I create an unordered list, with each list item containing a panel. The list is unstyled, and the list items are inline and floated.
A couple of things to note: The list is set at 'left: -300px', which brings the second item of the list into view. That was for testing purposes; I've left it as-is on purpose. This code is the basic ideas behind all sliders, rotating displays, etc. etc. I've made it as simple and obvious as possible, to help you implement your own versions yourself.
The code below has been defanged by wordpress: