Làm thế nào để bạn tạo một trang web "tách rời" (như Wario Shake nó quảng cáo trên Youtube)?

Question

Họ đã tạo trang này bằng cách nào? http://www.youtube.com/wariolandshakeit2008

Nếu có ai có hướng dẫn về cách thực hiện một việc như thế này, vui lòng cho tôi biết!

Answer 1

Có vẻ như toàn bộ điều là phim Flash với tôi. Có một iframe nhúng với URL này: http://1q1gafmnta4fm0riakrenq213o0sa9p9.ig.gmodules.com/ig/ifr?url=http://facebook.gspsf.com/~wii/wariolandshakeit2008/gadget_files_040209/google_gadget.xml&lang=en&hl=en_US

Trong thực tế, đây là SWF: http://facebook.gspsf.com/~wii/wariolandshakeit2008/gadget_files_040209/main.swf

Answer 2

Đó là mát mẻ - Tôi không thể giải thích nó như thế nào để làm điều đó, nhưng nếu bạn nhấn chuột phải bất cứ nơi nào trong cơ thể của trang, bạn sẽ thấy nó là tất cả đèn flash.

Answer 3

Lưu ý: Vì lý do gì đó tôi nghĩ hiệu ứng đã sử dụng các thủ thuật js giống như thử nghiệm trọng lực chrome.

Trong khi điều này dường như được thực hiện trong flash, một cái gì đó rất giống nhau có thể được thực hiện với công cụ html5 mới.

Nói chung, không có gì ngăn bạn tự mình tải xuống tất cả mã nguồn javascript và cố gắng tìm hiểu điều gì đang diễn ra. Cũng có một cái nhìn tại existing Javascript physics engines và Chrome experiments như this one

Nếu bạn thâm nhập vào các mã nguồn nếu thử nghiệm lực hấp dẫn, bạn sẽ tìm thấy hai điều quan trọng:

1. Nó sử dụng Box2D javascript cơ
2. Các tọa độ - và quan trọng hơn là việc xoay vòng các phần tử đang được sửa đổi với những tuyên bố này

-

for (i = 0; i < elements.length; i++) 
{ 
    var element = elements[i]; 

    element.style['left'] = (bodies[i].m_position0.x - (properties[i][2] >> 1)) + 'px'; 
    element.style['top'] = (bodies[i].m_position0.y - (properties[i][3] >> 1)) + 'px'; 

    // webkit 
    element.style['-webkit-transform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)'; 

    // gecko 
    element.style['MozTransform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)'; 

    // opera 
    element.style['OTransform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)'; 
}