OriDomi 在网页中像纸一样折叠 DOM 元素炫酷插件

发布于 2020-07-06 22:28:40 字数 6497 浏览 1540 评论 0

Web 原本是扁平化的，但是现在你可以折起来。OriDomi 是一个开源的 JavaScript 库，使得 DOM 元素能够实现像纸折一样折叠的效果。在创建你所看到的场景背后，OriDomi 做了大量的 DOM 操作。 OriDomi 需要现代浏览器支持 CSS3 转换，特别是 preserve-3d 支持。您可能会注意到，OriDomi 在 WebKit 核心的浏览器中效果最佳。

主要特性

图片小于15K
可选择性支持jQuery/Ender
可以在 iOS 环境下工作
支持折叠效果，页面字体和动画图片
使用动画队列技术
支持鼠标点击和移动触摸
折叠效果非常流畅
可以使用动画回调函数

这里有一些动画演示的折叠效果，包括横向 / 竖向折叠、切片式，阴影等，并且所有的内容都可以自定义。此款特效还包括：手风琴、卷曲、折叠、缩放等。oriDomi 兼容所有现代浏览器，当然也包括移动设备。

初始化方法

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

项目地址：http://oridomi.com

分享到QQ

分享到微博