Discovering what life is about

Design effect - Carousel 3D

Design effect Carousel 3D Cloud Carousel - A 3d Carousel in Javascript


There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. To redress the balance in JavaScript's favour, I have created this jQuery carousel plugin.

Self-portrait in red chalk, circa 1512-1515. Oil on cotton wood, circa 1503–1505. Oil on wood panel, 1485. Oil on canvas, circa 1501. Oil on canvas (transferred from panel), circa 1490. Oil on walnut panel transferred to canvas, circa 1510–1515. Oil on panel, circa 1478–1480. Charcoal, black and white chalk on tinted paper, circa 1499–1500. Oil on panel, circa 1510.

Leonardo Da Vinci

Self-portrait in red chalk, circa 1512-1515.

The above carousel features optional auto-reflections, and the information contained in the Alt and Title tags of the images can optionally be displayed as you hover over each image.

There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/accessibility. Not having another dev-tool in the workflow is another plus.

The carousel features realistic perspective. Many 3d carousels only apply perspective scaling to the size of the images, not their positions. This results in disproportionate gaps appearing between items as they shrink in the distance which looks odd.


* Works with most browsers (tested on IE6+, Firefox, Chrome, Opera, Safari).
* Accurate 3d perspective.
* Optional auto reflections - no need to modify your images or add server code.
* Easy integration with basic valid HTML and a tiny bit of JavaScript.
* Small 5Kb (minified) script..
* Degrades gracefully with Javascript turned off.
* Fully accessible with no CSS or text only browsers.
* Works with other plugins, e.g. Slimbox, and preserves your links and mouse events.
* Optional mouse wheel support as of version 1.0.2.
* It's completely free.



Ref :


Categories : Online business    Themes : e-commerce Design
Share |
add a comment...

0 Comment

Leave a Comment