使用 CSS3 实现 3D 图片滑块效果
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 图片滑块效果的更多相关文章
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用CSS3实现3D图片滑块效果
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 纯CSS3实现的图片滑块程序 效果非常酷
原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...
- 精致3D图片切换效果,最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 纯CSS3实现的图片滑块程序,效果非常酷
接下来我们一起来分析一下源码,首先是HTML代码,非常简单: <div id="gal"> <nav class="galnav"> & ...
- 原生JavaScript+CSS3实现移动端滑块效果
在做web页面时,无论PC端还是移动端,我们会遇到滑块这样的效果,可能我们往往会想着去网上找插件,其实这个效果非常的简单,插件代码的的代码往往过于臃肿,不如自己动手,自给自足.首先看一下效果图: 分析 ...
- web CSS3 实现3D动态翻牌效果
使用纯CSS3 实现翻牌效果 需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...
随机推荐
- OSI七层网络模型
概述: OSI是一个开放性的通信系统互连参考模型,他是一个定义得非常好的协议规范.OSI模型有7层结构,每层都可以有几个子层. OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输 ...
- 【一天一道LeetCode】#114. Flatten Binary Tree to Linked List
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- AnimatedPathView实现自定义图片标签
老早用过小红书app,对于他们客户端笔记这块的设计非常喜欢,恰好去年在小红书的竞争对手公司,公司基于产品的考虑和产品的发展,也需要将app社交化,于是在社区分享这块多多少少参照了小红书的设计,这里面就 ...
- iOS中 UITabBarController中自定义UITabBar
1.创建多个视图控制器,放如UITabBarController中 AViewController *aa = [[AViewController alloc] init]; UINavigation ...
- OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据
OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...
- List常用整理
长期更新,主要记录List的各种常用操作整理. 对List进行排序 // Collections.sort(重写toString()进行排序区分) List<ObjectName ...
- [问与答]为什么 'a' in ('abc') 是True 而 'a' in ['abc'] 是False呢?
Why is 'a' in ('abc') True while 'a' in ['abc'] is False? 原文链接 问 在使用解释器的时候,表达式'a' in ('abc') 返回是True ...
- Spring揭秘 读书笔记 三 bean的scope与FactoryBean
本书可作为王富强所著<<Spring揭秘>>一书的读书笔记 第四章 BeanFactory的xml之旅 bean的scope scope有时被翻译为"作用域&quo ...
- 【一天一道LeetCode】#20. Valid Parentheses
一天一道LeetCode系列 (一)题目 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', ...
- Android开源项目——带图标文字的底部导航栏IconTabPageIndicator
接下来的博客计划是,在<Android官方技术文档翻译>之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译 ...