Why
The screensavers available on Mac OS X Mountain Lion are so beautifull, they shouldn't be for Mac users only. When developing a system for a tv in a public room, I decided to display the photographs in this fashion. To share this with the world I made it available for contribution and usage on Github. To make this some sort of achievement I tried to use as much CSS3 and as less jQuery stuff as possible, therefore showing the capabilities of CSS3 and HTML5.
How it looks:
Usage
To use the Shifting Tiles gallery you should clone the repository
$ cd your_project_root/lib
$ git clone https://github.com/hermanbanken/shiftingtiles.git shiftingtiles
... and write the following lines to initiate the gallery in the node with id #elem
<script>
function photoSource(){
return ["img.jpg"];
}
$("#elem").shiftingtiles(photoSource(), { duration: 2000 });
</script>
You may need to specify the size of the canvas like this, default is 1440x900.
<style>
.shiftingtiles {
position: absolute;
height: 100%;
width: 100%;
}
</style>
The Animations
Single box:
Duo box:
Authors and Contributors
Shifting Tiles was created by @hermanbanken inpired by Apple and enpowered by HTML5 and CSS3.
Support or Contact
Having trouble with shifting tiles? Contact me via Github, @hermanbanken.