jQuery炫酷HTML DOM元素纸张3D折叠特效

oriDomi是一款非常神奇的jQuery炫酷HTML DOM元素纸张折叠特效。oriDomi能够将HTML DOM元素转换为纸张状态，你可以用鼠标来任意折叠它们。oriDomi可以折叠的不仅是静态图片，也可以是动态图片，div元素，h1元素等等。oriDomi的特点有：

• oriDomi没有任何外部依赖。
• 响应式设计。
• 通过media queries进行屏幕适配。
• 大小小于20K。
• 使用动画队列技术。
• 兼容IOS。
• 支持鼠标点击和移动触摸。
• 折叠效果非常流畅。
• 可以使用动画回调函数。
• 可以完美与jQuery集成。

先通过几张图片来欣赏一下纸张折叠效果：

使用方法

初始化方法

创建一个OriDomi对象，并将要进行折叠纸张转换的元素传递到它的构造函数中：

var folded = new OriDomi(document.getElementsByClassName('paper')[0]);                
              

或者使用一个选择器字符串，OriDomi会对第一个匹配的元素进行转换：

var folded = new OriDomi('.paper');                
              

如果你作为jQuery插件来使用，可以像下面这样做：

var $folded = $('.paper').oriDomi({/* options object */});
// when using jQuery, iterate OriDomi methods over multiple elements like this:
$folded.oriDomi('accordion', 20);
// to access the OriDomi instance at the top of the jQuery selection directly:
var folded = $folded.oriDomi(true);                
              

配置参数

var folded = new OriDomi('.paper', {
  vPanels:         5,     // number of panels when folding left or right (vertically oriented)
  hPanels:         3,     // number of panels when folding top or bottom
  speed:           1200,  // folding duration in ms
  ripple:          2,     // backwards ripple effect when animating
  shadingIntesity: .5,    // lessen the shading effect
  perspective:     800,   // smaller values exaggerate 3D distortion
  maxAngle:        40,    // keep the user's folds within a range of -40 to 40 degrees
  shading:         'soft' // change the shading type
});                
              

• vPanels：水平纸张折叠效果时的折叠数量。
• hPanels：垂直纸张折叠效果时的折叠数量。
• speed：折叠的持续时间，单位毫秒。
• ripple：动画的时候背面的波动效果。
• shadingIntesity：减少阴影效果。
• perspective：3D透视效果。
• maxAngle：折叠的角度范围，设置为40表示从-40度到40度。
• shading：阴影的类型。

你可以在这里查看所有的参数：OriDomi源码解析。

折叠效果

大多数的折叠效果只需要一个折叠角度作为它的第一个参数：

folded.accordion(30);                
              

你可以使用第二个参数指定从上面方向开始折叠（left, right, top 或 bottom）：

folded.curl(-50, 'top');                
              

foldUp()是唯一一个不需要参数的折叠方法

// completely hides the element:
folded.foldUp();                
              

对应的unfold()方法会在其它折叠方法被使用前自动调用。

你可以在这里查看所有的设置效果的方法：OriDomi源码解析。

回调函数

你可以在折叠动画结束后调用回调函数：

folded.curl(-50, 'top', function(event, instance) {
  // arguments are the transition event and the OriDomi instance
  alert('It seems my folding days are through.');
});                
              

注意，回调函数的参数比较复杂。OriDomi会自动根据参数的个数来解析参数的意义：

folded.ramp(14, function() {
  alert('A callback as a second argument...');
});                
              

折叠动画序列

回调函数虽然十分有用，但是在制作一系列的折叠动画的时候显得有些笨重：

// a pyramid you can choose to avoid:
folded.curl(50, function() {
  folded.collapse(function() {
    folded.setSpeed(2000);
    folded.stairs(-29, function() {
      folded.foldUp(function() {
        folded.unfold();
      });
    });
  });
});                
              

OriDomi内置了一个折叠动画序列系统，链式编程的方式可以使这一切都变得简单明了：

// same result as the previous example:
folded.curl(50).collapse().setSpeed(2000).stairs(-29).foldUp().unfold();
              

换句话说，你可以同步调用异步的方法，折叠操作会智能的进行。

你可以通过emptyQueue()方法来以编程的方式情况折叠动画序列，移动触摸和鼠标事件将会立刻停止折叠动画。

你还可以通过wait()方法，给它设置一个单位为毫秒的数值，来使折叠动画之间产生一些延时效果。

folded.reveal(20).wait(3000).fracture(-30);                
              

移动触摸设备

OriDomi默认情况下就具有管理鼠标和触摸事件的能力。要禁用移动触摸能力，可以在初始化时设置：

var handsOff = new OriDomi('.sandpaper', { touchEnabled: false });                
              

之后你可以随时修改它：

handsOff.enableTouch();

handsOff.disableTouch();                
              

如果你想跟踪每一步的触摸事件，并编写自己的代码，可以在初始化参数中指定回调函数：

var slider = new Oridomi('.slider', {
  touchStartCallback: function(startCoordinate, event) {},
  touchMoveCallback:  function(movementAngle, event) {},
  touchEndCallback:   function(endCoordinate, event) {}
});                
              

内容管理

OriDomi会在js代码中对DOM元素进行大量的操作。如果你想对已经折叠的元素添加新的内容和重新赋予样式，OriDomi提供了一个set方法可以使用：

folded.modifyContent(function(el) {
  el.querySelector('h1').innerHTML = 'ch-ch-ch-ch-changes... turn and face the strange'
  el.style.backgroundColor = '#000';
});                
              

通过modifyContent()函数，你可以非常容易的管理每一个折叠面板，它的第一个参数是一个面板元素。modifyContent()函数也可以传折叠方向（top, left, right 或 bottom）作为参数，第几个面板由第二和第三个参数决定。

你也可以传入一个map结构的对象作为参数：

folded.modifyContent({
  h1: {
    content: 'Hello there',
    style: {
      color: 'green',
      textDecoration: 'underline'
    }
  },
  'div > p': 'just some text.',
  img: {
    style: {
      width: '99%'
    }
  }
});                
              

波动效果

默认情况下，折叠效果的所有折叠动作是同时完成的。你可以在初始化参数或调用setRipple()方法时通过设置ripple: true来制作折叠的波动效果。

// staggered, rippling animations:
folded.setRipple().accordion(28).stairs(-40);

// disable ripple:
folded.setRipple(0);

// ripple forwards (default):
folded.setRipple(1);

// ripple backwards:
folded.setRipple(2);                
              

demo中的效果都使用了波动效果。

响应式效果

OriDomi可以动态的跳转元素的尺寸。也就是说，如果你通过百分比尺寸、media queries、CSS transitions或Js脚本来修改了折叠元素的尺寸，OriDomi会自动将折叠面板的尺寸缩放到匹配它的父元素尺寸的大小。

你可以在DEMO中缩放浏览器页面来看看它的响应式效果。

自定义面板的尺寸

如果你想要尺寸不均匀的折叠面板，你可以在参数中插入一个百分比数组来代替数字参数：

var simple = new OriDomi('.simple', { vPanels: [10, 10, 10, 70] });

var fibonacci = new OriDomi('.fibonacci',
  {
    vPanels: [1, 1, 2, 3, 5, 8, 13, 21, 34].map(function(n) {
      return n * 1.1363636363636365;
    })
  }
);                
              

唯一的要求是百分比的数值加起来要等于或接近100，例如[33, 33, 33]是有效的。

自定义效果

如果你觉得内置的折叠效果不够好怎么办呢？没关系，你可以通过map()方法来精准的控制每一个折叠面板的折叠动画。

folded.map(function(angle, index, length){ return angle * index * Math.random() })(20);                
              

在上面的代码中，在map()函数中插入了一个异步的函数，这个函数简单的将插入的角度值、index和一个随机数相乘来的到返回结果。这个函数会被序列中的每一个折叠面板调用，由于有随机数，每一个面板都可能获得不同的折叠效果。

由于是该函数是通过面板的index来调用的，并可以设置长度，我们可以制作出更为复杂的面板折叠效果：基于单/双面板、角度范围或基于第一/最后位置来指定特殊行为，等等。例如，你想要制作第一个和最后一个面板与整个平面方向相反的折叠效果，你可以基于index和length作为参数来实现这个效果。

提示

OriDomi需要支持CSS3 transforms，特别是preserve-3d属性的现代浏览器才能正常工作。IE10及其以下的IE浏览器不支持这个效果。你可以在运行时通过OriDomi.isSupported方法来测试浏览器是否支持该插件。在不支持的浏览器中初始化OriDomi对象实例不会发生任何效果。所以在你的代码中最好使用一个条件判断来测试浏览器对插件是否支持。