CSS peephole
CSS Peephole DemoThis code is what I have used in my scroller as well as a number of other projects that I have worked on where the client wants new content to be moved in. It has its best effect when used with jQuery to AJAX in some new content and animate it into the viewing area.
The general idea is to have a large content area inside a smaller div which is position relative and overflow hidden thus making the smaller outside div a peephole to the larger content div. The following code is generally the same as what I have used in the demo
<div id="peephole_inner"> <!-- content -->
#peephole { position: relative; float: left; overflow: hidden; height: 395px; width: 395px; border: solid 2px #e3effd; }
#peephole_inner { position: absolute; top: -46px; left: -160px; }
It can get a bit confusing when trying to AJAX in new content but once you’ve done it a few times it becomes quite simple and can be a very effective way of getting a lot of content into a small area as well as giving some pretty funky interactivity for the user.
