Gallery thumb fan spin effect with CSS and jQuery

defaultfanspineffect

 

The gallery thumb items are  collapsed at backside of front cover(one of thumb item).

Once mouse over on the front cover, the items will be expended like below:

fanspineffect

 

Can click the right or left arrow to slide item around the front cover, and click the close button to collapse them again.

below is the html code:

The html code is very simple, just ul, li with background image.

use below css code to layout those elements:

If we want to make the “fan” area dynamic in size, need some javascript code to handle them:

In above code we defined the “fan” area size(width & height) according the  size of item(li), and posited the front cover at middle bottom of “fan” area.

Next, we need to add left, right and close buttons on front cover by javascript:

We use svg element to draw those buttons, and define those style in css:

Now, we can start the code for click event on those buttons, before this, we need to add mouse enter event on front cover, so that can expend items for sliding.

we use an array to store position data for five item around front cover.

Now, define a function named Transform():

Register event to left, right and close buttons:

http://codepen.io/WangWeiqiang/pen/GdIlJ

Tagged with: , ,
Posted in CSS3, Javascript

Leave a Reply

Categories

Related Posts