超棒的视差效果jQuery插件 - FractionSlider

标签： 视差 效果 jquery | 发表时间：2013-12-16 23:05 | 作者：tyygming
出处：http://www.iteye.com

 

在线演示1

 

 

如果你希望找到一款与众不同的 jQuery幻灯插件的话，F ractionslider/ 肯定会让你眼前一亮，和传统幻灯不同的是，它可以让页面中的任何元素生成独立的动画效果。

 

 

使用非常简单，如下：

 

引入CSS和JS

 

  1. <linkhref="fractionslider.css"rel="stylesheet"/>
  2. <scripttype="text/javascript"src="jquery-1.9.0.min.js"></script>
  3. <scripttype="text/javascript"src="jquery.fractionslider.js"></script>

 

HTML

 

  1. <divclass="slider"><!-- your slider container -->
  2. <divclass="slide"><!-- all elements for the first slide --></div>
  3. <divclass="slide"><!-- all elements for the second slide --></div>
  4. <!-- and so on -->
  5. <divclass="fs_loader"><!-- shows a loading .gif while the slider is getting ready --></div>
  6. </div>

 

需要动画效果的元素：

 

  1. <imgalt=""src="path/to/image"data-position="100,100"/>

 

调用插件：

 

  1. jQuery(window).load(function(){
  2. $('.slider').fractionSlider();
  3. });

 

下载地址： http://jacksbox.de/stuff/jquery-fractionslider/



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [视差 效果 jquery] 推荐：

超棒的视差效果jQuery插件 - FractionSlider

- - Web前端 - ITeye博客
如果你希望找到一款与众不同的 jQuery幻灯插件的话，F ractionslider/ 肯定会让你眼前一亮，和传统幻灯不同的是，它可以让页面中的任何元素生成独立的动画效果. 已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

【精心挑选】六款帮助你实现惊艳视差滚动效果的 jQuery 插件

- - 博客园_梦想天空
　　视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παράλλαξις ( parallaxis)，意思是"改变". 在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.

Jquery easyui 下loaing效果

- - CSDN博客推荐文章
beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功，关闭进度条. 作者：songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读：15 评论：0 查看评论.

20篇教你得到酷炫效果的JQuery教程

- 正宗 - 帕兰映像
我们都喜爱jquery带来的梦幻效果. 本之列举的教程标题不同，但它们都带有不同的酷炫视觉效果. 跟着它们逐步重建你的设计，又或是将这些令人震憾的特效融入你的设计中. 想打造一个让人过目不忘的专属网络文件夹?这个特效是不错的示例. 流行的相片墙加上简洁的特效，没有啰嗦的文字堆砌，立刻抓住用户的注意力.

20 个 jQuery 超酷视觉效果构建教程推荐

- qqinxl - ITeye资讯频道
作为web开发程序员来说，我们都非常喜欢jQuery构造的超酷视觉效果. 本文中我们将精选一组jQuery效果教程. 大家将从这些教程中学习如何开发超级酷的视觉效果特效. 根据这些教程，大家可以一步一步构建自己的视觉特效. 创建一个基于HTML5的代表作选辑. 这篇教程中，将会介绍如何使用HTML5和jQuery来创建自己超酷的个人代表作选集.

帮助你生成翻页效果的jQuery插件 – bookblock

- - 前端观察
今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock，使用它可以创建动态的类似书本翻页效果的幻灯. 这个插件依赖于 jQuery++，这个类库是一个jQuery的扩展类库，这里使用了它的swipe事件. 主要html代码如下，生成需要展示的图片内容：. 希望大家喜欢这个插件，如果你有任何问题，请给我们留言，谢谢.

JQuery EasyUi之界面设计——前言与界面效果（一）

- - 博客园_首页
如果冯巩的开场白是“观众朋友们，我想死你们了”，那么我的开场白是“最近一直很忙，很久没有发文了”. 前面说过了EXT.NET，这里顺便再说说JQuery EasyUI. 为啥我会选择JQuery EasyUI呢. 基本的组件都用，即“麻雀虽小五脏俱全”. 使用简洁方便，比如支持html+js. 世上没有完美的产品，而且其对IE6的兼容性还存在一些问题，但相比extjs，其还是很方便阅读和修改的.

简单的jQuery翻牌效果导航菜单

- - 可咔酷 | 网络杂货铺
前几天，有人在Q问那种翻牌效果的广告怎么实现，抽空整了个简单的jQuery翻牌效果的导航菜单，其实说简单也不是很简单，重要的是想好整个过程的思路就好下手了，不整demo了，直接贴代码. 简单的jQuery翻牌效果导航菜单. 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了.

jQuery 教程：简单的遮罩弹窗效果

- - 我爱水煮鱼
遮罩弹出效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西. 这种效果在网上很常见，例如：QQ空间浏览相册等. 这种效果的好处就是，可以让用户聚焦到弹出的菜单中. 神说，有代码的文章，应该有个 Demo ，于是就有了 Demo. 首先先来分析一下这个过程：触发某个事件（例如点击按钮），然后出现一个背景遮罩上面还有一个内容层.

使用 jQuery Easing Plugin 增强动画过渡效果

- - 我爱水煮鱼
jQuery 提供了一些诸如 show, hide, slideUp, fadeIn 等动画方法，可以方便的切换元素的显隐. 更有强大的自定义动画方法 animate ，可以实现很多动画效果. 为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果. jquery.easing.js 这个 jQuery 插件增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化.