首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

帮助你在移动设备上生成倾斜控制(重力控制)的旋转效果jQuery插件 - lenticular.js

帮助你在移动设备上生成倾斜控制(重力控制)的旋转效果jQuery插件 - lenticular.js

在线演示

相信大家如果使用过iphone/ipad的话,肯定对于倾斜控制(重力控制)比较熟悉,在今天的插件介绍中,我们推荐一款帮助你通过倾斜控制来控制图片效果的插件 - lenticular.js,使用它能够帮助你快速的实现倾斜设备来控制旋转的效果,相信对于在ipad/iphone或者其它触摸设备上开发web应用的朋友来说是一个超棒的工具。

这个插件最初为移动设备开发,可以针对当然,如果你使用一般PC,那么将会针对你的鼠标位置来实现特效。

实现方式

主要的实现方式是通过播放一系列的图片生成一个动画效果。我们可以通过制作每一帧的图片效果来达到一个动画过程。如下:

如何使用

如果我们要创建一个10帧的动画效果,使用代码如下:

// 创建一个 10 帧的动画效果,参数1:图片名称,参数2:帧数
var myLenticular = new Lenticular.Image($('.lenticular')[0], {
images:…

标签: iphone, ipad, 重力控制, tilt, lenticularjs

阅读更多

来自于Mozilla Networks演示工作室的超酷CSS3/Javascript动画演示

这个叫做DemoStudio的网站来自于Mozilla Developer networks,收集了很多超酷的CSS3和Javascript特效。因为都是实验产品,所以如果你使用这些技术,有可能在一些老的浏览器,比如,IE中无法正常工作。当然如果你有fallback的话,大可以使用这些技术。相信你肯定会喜欢这些超酷的特效。如果大家喜欢,请给我们留言!

折纸效果

相当不错的折纸效果

Paperfold

RotorJS

旋转3D操作类库 - 轻量级并且可扩展

RotorJS

3D图片过渡

类似flash效果的3D CSS过渡效果

3D Image transition

The Box

一个动画卡片和白纸的3D情节,由回收材料制成。

The Box

3D Flip list menu

一个翻动的3D菜单特效

CSS3 Reflection effect

动画菜单图标

小并且可缩放,纯CSS3实现的动画

Animated Menu Icons

Animated CSS3 Gallery

一个使用淡入缩放图片效果画廊

Animated CSS3 Gallery

The CSS Book

纯CSS实现的3D书效果

The CSS Book

via quaness.com

标签: HTML5, CSS3, Javascript, jQuery, jQuery Mobile, jQuery插件, 图标, 模板, iphone, ipad, 产品, 用户体验

阅读更多

分享一个支持ipad/iphone/平板电脑触摸操作的javascript类库 - Hammer.js

Hammer.js

在线演示  在线下载

这里我们分享一个超酷的帮助你打造平板触摸类操作的javascript类库 - Hammer.js,使用这个类库,可以帮助你实现类似ipad等平板电脑操作风格的界面。如果你需要让你的网站更好的支持ipad等触摸类的客户端设备的话,你肯定会喜欢这个类库!

主要特性

  • 支持几乎所有的主流浏览器
  • 支持各种触摸设备操作,例如,单击,双击,长按,拖拉,滑动变形
  • 类库非常小,2kb,非常容易自己定义修改
  • 专注于触摸客户端设备
  • 需要jQuery

Hammer.js

如何使用

倒入jQuery和hammer.js类库:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="hammer.js"></script>

将hammer绑定到指定的元素:

var…

标签: 触摸操作js, hammer.js, javascript触摸类库, iphone, ipad

阅读更多

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐