오늘 Google 세계 박람회는 어떻게 구현되고 있습니까?

Question

나는 HTML5와 jquery의 힘을 사용하고 있다는 것을 알고 싶다. 어떤 샘플 예제도 이것을 얻을 수 있는가?

Answer 1

, 당신은 것입니다 실제로 낙서가 여러 개의 이미지로 구성되어 있음을 참조하십시오

• http://www.google.com/logos/2011/worldsfair11-hp-1.gif
• http://www.google.com/logos/2011/worldsfair11-hp-2.gif
• http://www.google.com/logos/2011/worldsfair11-hp-3.gif
/ http://pastebin.com/r8s9H2jA

확대경을 만들기 위해 자바 스크립트를 사용하는 것과 CSS의 조합을 사용 : -

• http://www.google.com/logos/2011/worldsfair11-hp-4.gif
• http://www.google.com/logos/2011/worldsfair11-hr.jpg 실제 정적 Doogle는
• http://www.google.com/logos/2011/worldsfair11-hp.png

아름답게 자바 스크립트는 여기 애니메이션 요소를 올바른 위치에 배치하는 JavaScript입니다. 짧은 그래서

:

• HTML5 : 그것은 CSS와 함께 자바 스크립트입니다. 이것은 자체적으로 HTML5 사양에 국한되지 않으므로 은입니다.
• jQuery : 아니요.

Answer 2

아니요, HTML5 또는 jQuery에서 새로운 기능을 사용하고 있지 않습니다 (루페 항목을 표시 할 때 사용하는 눈금 전환을 계산하지 않으면). 나는 Google이 그들의 첫 페이지에 jQuery만큼 큰 것을 넣을 것을 진지하게 의심한다 ...

낙서의 본질적으로 3 개의 사본을 가지고 둥근 "이미지 마스크"효과를 내고, 그들은

__|¯¯¯¯|__ 
|  | 
|  | 
|__ __| 
    |____| 

이것은 다음 확대경 이미지가 겹쳐이 (ASCII 아트 이동) 같은 것을보고, 그 두꺼운 테두리 우리가 낙서 이미지의 원형 부분을보고있는 것처럼 보일 수 있습니다.

Answer 3

가 나는 "렌즈 줌"이 같은 효과로 간단하게 그것을하고 검사 : 애니메이션에 대한 그 위에 http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html 큰 이미지와 약간의 애니메이션 GIF : 코드를 검사 할 때

는