Features...
- CSS3 Rotation
- 2 Fallback Sliders
- HTML5 Canvas Thumbnails
- Video Setup Instructions
- Easy Resize
Works In...
Note: IE6 - 8 (Or any other non-supported browser) have their own simpler fallback slider that does not rotate.The fallback slider for IE9 uses a javascript interval to allow it to rotate.
Easy Setup...
1. Open your help file.
2. Generate your CSS using the provided form and download your template.
3. Use the template to design your slides.
4. Create your html markup.
5. Upload.
6. Enjoy.
About the Slider
We have taken advantage of the web's newest CSS features to make a slider that animates in a way we have never seen before. The slider uses HTML5 Canvas to generate it’s uniquely shaped thumbnails. All while keeping the past in mind, the slider degrades gracefully in older browsers and will not break your layout if javascript is disabled.
When designing this slider, we wanted to have total control of the slider window. We found early on that when transitioning images this way, we knew needed to make images larger than the slider window.
Part of the help file will tell you what size you need to make your images, as well as provide a template. The template can be used when designing your slides, because it tells you which regions of the image will be seen when your images are moving or standing still. So no guessing is required when it comes to setting up your slider, or designing your slides.
The slider takes as many or as few images that you want. So we have included a video, with step by step instructions, that explain how to setup a PSD file, for the designing overlapping slides in a single PSD. The same method was used to design the slides in the slider above.