tiltShift.js - CSS3 滤镜实现移轴镜头效果
2014-12-12 10:00
531 查看
tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果。使用非常简单,使用 data 属性配置参数。温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
效果演示 插件下载
HTML 示例:
-position(0-100),定义对焦点的位置。
-blur(0 - ?),模糊半径。设置为1或2比较合适。
-focus(0-100),焦点的区域大小。
-falloff (0-100),完全焦点和完全模糊之间的区域大小。
-direction(“x”,“y”,或 0-360),方向。
JavaScript 调用示例:
您可能感兴趣的相关文章
网站开发中很有用的 jQuery 效果【附源码】
分享35个让人惊讶的 CSS3 动画效果演示
十分惊艳的8个 HTML5 & JavaScript 特效
Web 开发中很实用的10个效果【源码下载】
12款经典的白富美型 jQuery 图片轮播插件
效果演示 插件下载
HTML 示例:
<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">
-position(0-100),定义对焦点的位置。
-blur(0 - ?),模糊半径。设置为1或2比较合适。
-focus(0-100),焦点的区域大小。
-falloff (0-100),完全焦点和完全模糊之间的区域大小。
-direction(“x”,“y”,或 0-360),方向。
JavaScript 调用示例:
$(function() { $('.tiltshift').tiltShift(); });
您可能感兴趣的相关文章
网站开发中很有用的 jQuery 效果【附源码】
分享35个让人惊讶的 CSS3 动画效果演示
十分惊艳的8个 HTML5 & JavaScript 特效
Web 开发中很实用的10个效果【源码下载】
12款经典的白富美型 jQuery 图片轮播插件
相关文章推荐
- 一个不陌生的JS效果-marquee,用css3来实现
- 滤镜帮助IE实现部分CSS3效果整理
- Js+CSS3实现手风琴效果
- js css3实现图片拖拽效果
- 不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
- 一个不陌生的JS效果-marquee,用css3来实现
- JS+css3实现图片画廊效果总结
- CSS3 filter 实现滤镜效果
- 学习css3过渡效果,可以实现很好玩的东西,无需js
- js、css3实现图片的放大效果
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- 利用JS和css3实现动画效果替代js的时间事件
- Mac 上Tilt-Shift 效果的实现代码
- 使用css3和js在手机上实现简单的跑马灯效果
- 非常惊艳的Css3的桌面上散落的相片效果,以及单击放大图片的LightBox效果(独立Js非jQuery)的实现原理
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- 用IE滤镜实现多种常用的CSS3效果
- 使用js方式实现图片变灰色的滤镜效果
- js点击按钮实现水波纹效果代码(CSS3和Canves)
- CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码(图片轮播效果一)