Slicebox – A fresh 3D image slider with graceful fallback

英文原文地址:http://tympanus.NET/codrops/2011/09/05/slicebox-3d-image-slider/
项目地址:https://github.com/codrops/Slicebox
demo地址:http://tympanus.net/Development/Slicebox/index.html

使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不同的效果。

  实现的基本思路是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像。若浏览器不支持3D变换,一个简单的滑块将作为后备方案。要调用这个插件,首先把图片放在无序列表中,然后添加 CSS 类——"sb-slider" 即可,下面是 HTML 代码示例:

<ul id="sb-slider" class="sb-slider">  

    <li>
<a href="#" target="_blank">
<img src="data:images/1.jpg" alt="image1"/>
</a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li> <li>
<img src="data:images/2.jpg" alt="image2"/>
<div class="sb-description">
<h3>...</h3>
</div>
</li> <li><!-- ... --></li> <!-- ... --> </ul>

另外也还可以使用带有 class 为 “sb-description” 的DIV来为图片添加描述。如本例所示,您还可以在图像周围添加锚点。然后调用插件就可以了:

$('#sb-slider').slicebox();  

Slicebox 配备了一组选项,你可以调整以实现不同类型的效果,各个选项和作用如

$.Slicebox.defaults = {
// 方向(v)ertical, (h)orizontal or (r)andom
orientation : 'v',
// 元素距离视图的距离,以像素计
perspective : 1200,
// 切片,长方体的数量
cuboidsCount : 5,
// 是否随机
cuboidsRandom : false,
// 长方体最大数量
maxCuboidsCount : 5,
disperseFactor : 0,
// 隐藏滑块的颜色
colorHiddenSides : '#',
sequentialFactor : 150,
// 动画速度
speed : 600,
// 过渡效果
easing : 'ease',
// 自动播放
autoplay : false,
// 旋转间隔
interval: 3,
// 淡入淡出速度
fallbackFadeSpeed : 300,
// 回调函数
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }
};

使用 CSS3 实现 3D 图片滑块效果的更多相关文章

  1. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  2. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  3. 纯CSS3实现的图片滑块程序 效果非常酷

    原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...

  4. 精致3D图片切换效果,最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  5. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  6. 网页特效:用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 纯CSS3实现的图片滑块程序,效果非常酷

    接下来我们一起来分析一下源码,首先是HTML代码,非常简单: <div id="gal"> <nav class="galnav"> & ...

  8. 原生JavaScript+CSS3实现移动端滑块效果

    在做web页面时,无论PC端还是移动端,我们会遇到滑块这样的效果,可能我们往往会想着去网上找插件,其实这个效果非常的简单,插件代码的的代码往往过于臃肿,不如自己动手,自给自足.首先看一下效果图: 分析 ...

  9. web CSS3 实现3D动态翻牌效果

    使用纯CSS3 实现翻牌效果  需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...

随机推荐

  1. OSI七层网络模型

    概述: OSI是一个开放性的通信系统互连参考模型,他是一个定义得非常好的协议规范.OSI模型有7层结构,每层都可以有几个子层. OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输 ...

  2. 【一天一道LeetCode】#114. Flatten Binary Tree to Linked List

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  3. AnimatedPathView实现自定义图片标签

    老早用过小红书app,对于他们客户端笔记这块的设计非常喜欢,恰好去年在小红书的竞争对手公司,公司基于产品的考虑和产品的发展,也需要将app社交化,于是在社区分享这块多多少少参照了小红书的设计,这里面就 ...

  4. iOS中 UITabBarController中自定义UITabBar

    1.创建多个视图控制器,放如UITabBarController中 AViewController *aa = [[AViewController alloc] init]; UINavigation ...

  5. OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据

    OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...

  6. List常用整理

            长期更新,主要记录List的各种常用操作整理. 对List进行排序 // Collections.sort(重写toString()进行排序区分) List<ObjectName ...

  7. [问与答]为什么 'a' in ('abc') 是True 而 'a' in ['abc'] 是False呢?

    Why is 'a' in ('abc') True while 'a' in ['abc'] is False? 原文链接 问 在使用解释器的时候,表达式'a' in ('abc') 返回是True ...

  8. Spring揭秘 读书笔记 三 bean的scope与FactoryBean

    本书可作为王富强所著<<Spring揭秘>>一书的读书笔记  第四章 BeanFactory的xml之旅 bean的scope scope有时被翻译为"作用域&quo ...

  9. 【一天一道LeetCode】#20. Valid Parentheses

    一天一道LeetCode系列 (一)题目 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', ...

  10. Android开源项目——带图标文字的底部导航栏IconTabPageIndicator

    接下来的博客计划是,在<Android官方技术文档翻译>之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译 ...