A generic javascript function that will create a randomly timed image "flipper". The image container will flip in 3D and be replaced with a new random image from a sprite. CSS Transitions and Transforms are used when supported with a graceful fallback to regular jQuery fades if not.
Images must be stored in a horizontal sprite, with each image the exact same dimensions. So, for example, a sprite containing 10 images that are 100x100 will be 100 pixels tall by 1000 pixels wide with the 10 images alinged horizontally (no space between images).
Usage:
var myflip = new PhotoFlipper({ sel: '#galleryFlipper1', width: 100, height: 100, photos: '/url/to/photos_sprite.jpg', count: '8' //optional parameters: //delaymin: 5, //delay in seconds to start of flip //delaymax: 20 //max random amount of time to flip to another });
Necessary CSS:
.flip-container { -moz-perspective: 1000; -ms-perspective: 1000; -webkit-perspective: 1000; perspective: 1000; } .flip-container.hover .flipper { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .flipper { position: relative; } .flip-container .flipper { -moz-transition: 0.6s; -o-transition: 0.6s; -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .front, .back { position: absolute; top: 0; left: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .front { z-index: 2; } .flip-container .front, .flip-container .back { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .flip-container .back { -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
HTML:
<div id="galleryFlipper1"></div>
*Note: jQuery is required.