JQuery와 3D 반지

Question

나는 3 차원으로이 웹 사이트 http://www.asianimedia.com/

과 동일하지만 JQuery와에 필요한 효과, 그리고 플래시를하고 싶어.

나는 내가 비슷한 일을 할 수있는이 라이브러리를 사용하여, JQUERY 3D 엔진을 시도,하지만 내가

이

사람이 그것을 어떻게 말해 줄 수있는이 순간에 그것을 할 질수있는 99 % 동일해야합니까? 또는이 난 현재, 그래서 그냥 (꽤 호환되어야 의미, 더 CSS를 변환) jQuery를 사용하지 않고, http://www.devirtuoso.com/2009/09/3d-plane-for-jquery-3d-engine/

Answer 1

확인을 사용하여 3D 엔진, 내가 왔어요되어 더 나은 3D 라이브러리

이있다 다음과 :

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의 크기를 조정할 수 있습니다.

이 정보가 도움이됩니까?

좀 더 자세한 설명을 원하면 알려주세요. :) 따!