3D多角度翻转圆形幻灯片

分类栏目:用户体验 - 前端开发

249796

发布于 22 条评论

今天就为大家分享一个简单而有趣的3D多角度翻转圆形幻灯片,这是一个实验性的小插件,会根据你鼠标在圆圈内的位置(顶部、中部和底部),出现相对应的导航箭头,当点击导航箭头时,圆圈内的图片会出现3D翻转效果,而翻转角度会随着你点击的位置而不同。这个插件的效果非常的酷和有趣,希望可以运用到我们的项目中。一起先来看看demo吧。

3d-flip-round-slide

查看预览下载附件

这个幻灯片的结构看起来像是这样子的:

<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 src="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>

但我们需要把它改成:

<div id="fc-slideshow" class="fc-slideshow">

    <ul class="fc-slides">
        <!-- ... -->
    </ul>

    <nav>
        <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">
            <div><img src="images/5.jpg"><h3>Soft</h3></div>
            <div class="fc-overlay-dark"></div>
        </div>
    </div>

</div>

<nav>元素含有一些空的<span>标签,是用来作为检查区域的,在圆圈的每一侧将会有三个地方可以点击,一个在顶部,一个在中间,最后一个则是在底部。根据我们鼠标停留在哪一个<span>标签上来显示相对应的导航箭头以及幻灯片翻转时的开始角度。

在这个圆圈内的图片在翻转时将会出现3D的三维结构:有正面和反面。当导航链接到下一个或者上一个图片时,会显示出3D的一个翻转效果。

我们还可以结合的光影知识,给幻灯片添加一些阴影和高光效果,使整个幻灯片在翻转时更加的逼真。其实现手段主要是通过透明度来控制的,而不透明度的取值取决于翻转的角度。

简单调用插件方式:

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

设置插件的基本参数:

// the options
$.Flipshow.defaults = {
    // default transition speed (ms)
    speed : 700,
    // default transition easing
    easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

查看预览下载附件

请注意,这是一个实验性的插件,还需要浏览器支持CSS 3d transforms标签。而在不支持的浏览器中,将只会显示和隐藏上一个下一个图片,不会拥有3D翻转效果。

希望你能喜欢这个小插件。

译文:codrops

全部评论 / 22

  1. 这个效果碉堡了,一定要想办法应用一下。

    14
  2. 主题有点花花

    Musk 2013-01-29
    13
  3. 不错,写的非常不错!

    12
  4. 新年到了,博客不停更,谢若尧在这给您拜年了!

    11
    1. Javin

      同乐,祝身体健康,万事如意。

      1号 Javin 2013-01-29
  5. 春节快乐,博主一年辛苦了

    10
    1. Javin

      同乐

      1号 Javin 2013-01-29
  6. 来学习一下,大力支持

    9
  7. 如果所有浏览器都支持就好了,我用搜狗好像看不来效果呢!

    8
  8. 博主你好,有意在贵站购买文字链接,有意请添加qq:1375751312详谈,谢谢。

    印象北角 2013-01-29
    7
    1. Javin

      本站不卖链接哦,抱歉。

      1号 Javin 2013-01-29
  9. 很给力,楼主是学动画的?玛雅?

    6
    1. Javin

      不是动画方向的,没有学过Maya。

      1号 Javin 2013-01-29
  10. 网站的响应式布局不错 :roll:

    酷鸟 2013-01-29
    5
  11. 网站设计很漂亮!支持

    4
    1. Javin

      感谢支持 :smile:

      1号 Javin 2013-01-29
  12. 还不错,但是圆形的图片好像不太适合博客。。弄成logo应该还蛮好玩的

    大发 2013-01-29
    3
    1. Javin

      只要有创意,总会用得到的。(^-^)

      1号 Javin 2013-01-29
  13. 好漂亮的博客啊

    2
  14. 哎呀,貌似看不到效果

    予沐 2013-01-29
    1
    1. Javin

      在谷歌和火狐是没问题的,如果看不到效果可能是版本太低了

      1号 Javin 2013-01-29