This is an amazing HTML5 Canvas XML Cover Flow presenting a 3D photo gallery with tons of features. You can customize almost anything and the 3D reality presentation it’s so good that most probably you will never need another Cover Flow.
This very complex HTML5 Canvas 3D Cover Flowis is optimized for mobile devices (Android and IOS mobile devices such as iPad2, iPad3, iPhone, Samsung Galaxy Tab etc). It not only runs on those devices but it acts like a native app, you can touch and drag/rotate the Carousel just as you would a native app. Please note that we have tested it on IOS (iPad2 and iPad3) and Android (Samsung Galaxy Tab) and the performance is really good especially on the iPad with IOS5 or higher (the canvas on this devices is hardware accelerated).
This HTML5 Canvas Cover Flow can have any image presented in any way you want: horizontal, vertical, oblique, also it has unique presets with pre-defined movements and presentations. You can also set the colors of the buttons, scrollbar preloaders border etc, basically the entire color and graphics theme can be modified. Moreover, all the buttons and scrollbar are optional.
All the options can be easily modified from the configuration XML file, therefore also the maintaining of the carousel it’s much easier.
Example for setting up the carousel:
JavaScript code: var cc = new CanvasCoverflow(“myCanvas”, “load/config.xml”);
HTML code:
The CanvasCoverflow JavaScript class function needs just 2 arguments: the canvas id and the path to the XML file. In this way you can declare multiple instances, creating a new CanvasCoverflow instance for every canvas, with a different id and even a different XML configuration if you wish.
A help file is attached to the download file explaining all configuration tags and installation.
Please note that the control panel from the demo is there just to show how the cover flow can be configured, for your use the component comes without the control panel, int the source files both simple and control panel components are included.
Cover Flow Features:
mobile optimized.
XML driven.
all the positions, sizes and theme colors can be changed inside the XML file.
supports any image files (png, jpg, gif).
set the components canvas width and height.
set the cover flow position on the canvas.
set the thumb width and height.
set the cover flow images space on x, y and z axis.
set the cover flow angle for horizontal, vertical or oblique presentation.
set the thumb border size and color.
tooltip thumb option, which is dynamic (following the mouse).
set the tooltip background color and the text size and color.
the buttons can be enabled or disabled (this means that they will not be visible).
set the buttons colors.
the scrollbar can be enabled or disabled like the buttons.
set the scrollbar track and handler colors.
the buttons, scrollbar and slideshow preloader positions can be set to be anywhere.
the coverflow can also be scrolled with the mousewheel (you can disable this if you want).
slide show option.
auto play option.
set the slideshow transition time (when set to autoplay).
it can open URLs when an image is clicked.
the performance of this product is so good that you can have multiple coverflow instances set to auto-slide in the same page of your project or website.
Many other cool features!
Download HTML5 Canvas Cover Flow (Canvas)
pin icon at the top.
