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

PetitQ 图片/图形 2018-11-14 1.82K 0 0

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 对象实例不会发生任何效果。所以在你的代码中最好使用一个条件判断来测试浏览器对插件是否支持。