Jumping round Slide

Source: Internet
Author: User
Keywords Css3 html5

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

  

Online Demo: gbtags.com/gb/share/424.htm

Today I want to share with you a simple and interesting circular slide. This is an experimental concept, the idea is to click a circular picture at a specific angle, and it will flip to another circular picture. Divided into three different possibilities: top, middle, bottom. For example, when you click an image in the upper-right section, it flips at the relevant angle, making it look as if the part we're pressing over and showing the image on the back of it.

Structure:

<div id= "Fc-slideshow" class= "Fc-slideshow" > <ul class= "fc-slides" > <li><img src= "images/1.jpg" /><h3>hot</h3></li> <li><img src= "Images/2.jpg"/><h3>cold</h3></ li> <li><img src= "images/3.jpg"/><h3>light</h3></li> <li><img " Images/4.jpg "/><h3>dark</h3></li> <li><img src= images/5.jpg"/><h3>Soft </h3></li> <li><img src= "images/6.jpg"/><h3>hard</h3></li> <li> <img src= "images/7.jpg"/><h3>smooth</h3></li> <li><img src= "Images/8.jpg"/> <h3>Rough</h3></li> </ul> </div>


We change it to:

<div id= "Fc-slideshow" class= "Fc-slideshow" > <ul class= "fc-slides" > <!--...--> </ul> <nav& Gt; <div class= "Fc-left" > <span></span> <span></span> <span></span> <i class= "Icon-arrow-left" ></i> </div> <div class= "Fc-right" > <span></span> <span ></span> <span></span> <i class= "icon-arrow-right" ></i> </div> </nav> <div class= "Fc-flip" > <div class= "Fc-front" > <div><img src= "images/4.jpg" ><h3>Dark </h3></div> <div class= "fc-overlay-light" ></div> </div> <div class= "Fc-back" >

  

This nav element has some empty spans as a "detection field". Each side of the circle has three clickable regions, one on top, one in the middle and one at the bottom. The I element will act as a navigation arrow, and depending on which span we hover over, we will rotate this small arrow to the correct position. But we don't use the arrow as the Click Area, but the entire span.

A circular partition contains a special three-dimensional structure: it has a front and a back. Once we navigate to the next or previous item, we will show its structure and rotate the container so that we can see the back.

Overlay charts provide light and shading to make everything look more realistic, and transparency depends on the angle of rotation.

Simple plugins:

$ (' #fc-slideshow '). Flipshow ();

Add these and become optional plugins:

The options $. Flipshow.defaults = {//Default transitions speed (ms) speed:700,//default transitions easing: ' Easing (. 2 9,1.44,.86,1.06) '};

Note that this is an experimental and will only work in browsers that support CSS 3d transformations. For other browsers that are not supported, there will only be a simple fallback, showing and hiding only the previous or last item.

Hope this widget can bring you inspiration!

Via Gbtags

Source: Jumping Round Slides

Date: 2013-3-8 Source: gbin1.com

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.