jquery折纸效果

 查看演示  website  立即下载

ORIDOMI实现的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);

参数配置

当创建新的 OriDomi 组成，则可以作为第二个参数传递一张地图的选项：

var folded = new OriDomi('.paper', {
  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
});

影响

大多数效果方法只需要一个折叠的角度作为其第一个参数。

folded.accordion(30);

您可以指定锚点以折从 （左、 右、 顶部或底部） 作为第二个参数：

folded.curl(-50, 'top');
foldUp()是一种独特效果方法不带角度参数，因为它会导致 OriDomi 组成完全卷起交错的方式。
// completely hides the element:
folded.foldUp();

回调

也许你会想当动画完成的时候做点什么吗？传递一个回调函数：

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...');
});

PREVIOUS:
NEXT:
jQuery ReSmenu 菜单
以简单的方式创造有趣和疯狂的移动文本。