1. A Pure CSS Coverflow
This hack demonstrates how you can do a coverflow without any javascript whatsoever that works in Opera, Safari, Chrome and Firefox (maybe IE I haven't checked). This technique could also be quite useful for creating javascript free presentations. If you are viewing on a mobile please make sure you are viewing in landscape mode.
To move to page two click the title in the second page or click on this link.
2. How no javascript?
This exploits the :target pseudo class. If you look at your address bar you will see that the current hash is #2 which is the id of the div this text resides in. This div is therefore currently the :target therefore can be centered with css so that it displays how you are reading it now.
We can style the div with class .page to the right using the css rule
.page:target + .page
We can't locate the previous .page div (due to the lack of a selector), however we can locate any pages that come after the div.page to the right using the selector
.page:target + .page ~ .page
Anything to the left is anything that fails to match the above. We can rely on z-index to ensure that the last viewed page sits on top. So basically anything before the left page is simply underneath it meaning the left page to this one is always on top. Try clicking the heading link there to navigate back to the last page.
3. Cover flow effect
The cover flow effect just makes use of transitions. When the position changes we use a css transition on the right property to animate it so that appears like it is rotating and moving into place.
5. Suggested Next Steps
Some ideas...- Some simple javascript could be added to detect swipe, keypress and click events to make this more like a presentation tool.
- Would be good if the initial div could be hidden when a target is selected.
- Would be great if it was possible to target and hide pages before the target div.
6. Thanks
Thanks for your time. I hope you found this interesting. Power to the CSS! Please Share! and follow me on twitter!