Here's a really quick breakdown of the workflow:
- Make a <div> container and set the overflow to hidden.
- Inside that container, create one <div> for each item.
- Place the items in a row, using CSS. Some of the items will end up outside, that's a good thing.
- Using JavaScript, change the placement of all the <div> blocks when a button is pushed so that the entire row of items move.
You can use
MooTools for replacing the <div> blocks, it's simple to use and you can get some good transitions.