0

このウェブサイトhttp://www.asanimedia.com/と同じ 3D 効果を作りたいです。

しかし、フラッシュではなく jquery で必要です。

私はJQUERY 3Dエンジンを試しました。このライブラリを使用して同様のことを行うことができますが、99％同じことが必要で、現時点ではできません

誰も私にそれを行う方法を教えてもらえますか? または、より優れた 3D ライブラリはありますか

これは私が現在使用している 3D エンジンです http://www.devirtuoso.com/2009/09/3d-plane-for-jquery-3d-engine/

4

1 に答える 1

2

わかりましたので、jQueryを使用するだけで（css変換はありません。つまり、かなり互換性があるはずです）、次のことを思いつきました：

http://jsfiddle.net/andyc/ZncP6/

var numOfBoxes = 10;
var boxContainer = $(".boxcontainer");
var gap = 360 / (numOfBoxes);

for (var i = 0; i < numOfBoxes; i++) {
    $("<div>").attr("data-offset", (gap * i)).addClass("box").appendTo(boxContainer);
}

$(".box").each(function() {
    var box = $(this);
    positionBox(box, 0);
});


$({position: 0}).animate({position: 360}, {
    duration: 4000,
    step: function() {
        var currentPosition = this.position;
        console.log(currentPosition);
        $(".box").each(function() {
            var box = $(this);
            positionBox(box, currentPosition);
        });
    }
});

function positionBox(box, position) {
    var newPosition = position + box.data("offset");
    var newRadianPosition = convertToRadians(newPosition);

    var x = Math.cos(newRadianPosition) * 200 + 200;
    var y = Math.sin(newRadianPosition) * 100 + 200;

    var absolutePosition = newPosition % 360;
    if (absolutePosition > 180) {
        box.css("z-index", "0");
    }
    else {
        box.css("z-index", "");
    }

    // Could scale the size of the item here as well as position
    box.css("top", y + "px").css("left", x + "px");
}

function convertToRadians(degrees) {
    return degrees * (3.14159265 / 180);
}​

それは少しラフで準備ができているので、明らかにあなたのニーズに合わせて調整したいと思うでしょう. 事実上、それが行うことは、各ステップで小さな div をインクリメントし、中央の div の周りに再配置するカスタム jQuery アニメーションを作成することです。それらが途中である場合、その z インデックスが変更され、奥行きの錯覚が作成されます。

もう少しリアルに見せたい場合は、フォントにどれだけ近いかに基づいて、いつでも div のサイズを変更できます。

これは役に立ちますか？

もう少し説明が必要な場合はお知らせください。:)た！

于 2012-06-01T08:25:30.653 に答える