coverflow.jsβ

author fork me

Coverflow.js simulates the Apple Cover Flow UI effect, without any dependency.

Chrome & Safari & Firefox only.

Demo 1: scroll / click

<div class="coverflow" data-size="180" data-spacing="20" data-shadow="false" data-flat="false" data-bgcolor="#fff" data-width="1000">
    <img src="img/A.jpg" data-info="Moon Landing">
    <img src="img/B.jpg" data-info="Red">
    <img src="img/C.jpg" data-info="Greatest Hits">
    ...
    <img src="img/I.jpg" data-info="American Idiot">	
</div>

Demo 2

You can put everything into it, even a DIV tag.

This is a HTML element.

Click Me!

<div class="coverflow" data-size="100" data-spacing="10" data-shadow="false" data-flat="false" data-bgcolor="#fff" data-width="400" data-imgshadow="false">
    <img src="img/Mac.png" data-info="Happy Mac!">
    <div id="div-A" data-info="div">
        <p>This is a HTML element.</p>
        <a href="javascript:alert('Hi!')">ClickMe!</a>
    </div>
    <img src="img/Clarus.png" data-info="png">
    <img src="img/animator.gif" data-info="gif">
</div>

options

data-size: width of each element

data-spacing: spacing between two elements

data-shadow: reflection

data-flat: disable 3D rotation

data-bgcolor: background color

data-width: whole width

data-info: title of each element

Demo 3: no rotation

Demo 4: shadow & background color (disabled in Firefox)