Question

我正在使用Oridomi（oridomi.com）Javascript插件来实现纸张折叠动画。具体来说，我想在页面加载上展开div（图片开头）。

然而，我很难让unfold（）方法工作，尽管这是一个可以使用插件调用的方法。

你可以从这个example看到，我只能让div折回来，而不是从折叠状态展开（实际上，我希望动画可以反转）。

我的javascript函数 -

(function(){ function init(){

var $domi = $('.unfold').oriDomi({ vPanels: 2, hPanels: 1, speed: 500, shading: false });

setTimeout(function(){
$domi.oriDomi('reveal', -90);
}, 600);}

document.addEventListener('DOMContentLoaded', init, false);

})();

和CSS -

.unfold {
    font-family: "Abril Fatface", "Hoefler Text", Constantia, Palatino, Georgia, serif;
    font-size: 4.5rem;
    width: 25rem;
    height: 10rem;
    text-align: center;
    line-height: 1;
    color: #ff676d;
    background-color: #6ac1ff;
    padding: 2.5rem 0;
}

http://oridomi.com上的文档不清楚如何实现。任何帮助将非常感谢。感谢

Answer 1

如果Oridomi不支持反向，你有两个选择。一个是知道END凝视和domi.oriDomi('reveal', 0);。另一种方法是首先以0的速度反转它，然后在0deg显示为展开。这是一个小提琴：

http://jsfiddle.net/Av6cD/2/

(function fold() {

    var $domi = $('.unfold').oriDomi({
        vPanels: 2,
        hPanels: 1,
        speed: 500,
        shading: false
    });

    $domi.oriDomi('reveal', -90);

    setTimeout(function () {
        $domi.oriDomi('reveal', 0);
    }, 1000);

})();

请注意，即使这是一个很好的效果，oriDomi也会让你的DOM变得非常糟糕。一旦获得适当的支持，CSS着色器将成为可行的方式。

使用Oridomi（JS）在DIV上展开动画

1 个答案: