'애니메이션'에 해당되는 글. 1건

  1. 2007/05/30 구글이 첫 화면을 바꾸었다 - 플래쉬가 아닌 애니메이션 만들기 (8)
사용자 삽입 이미지

 구글이 메인 화면을 바꾸었다.
 구글이 Localization을 하면서 한국 사용자들의 입맛에 맞게 바꿀려는 시도인가?

 근데 그런거 치고는 너무 -_- 센스없다.
 색깔도 너무 많아서 너무 현란하고, 눈에 들어오는 곳도 없다.


 한 가지 재미있는 것은 검색 창 아래 Gmail, 토크, 캘린더, 노트 등등에 마우스를 대면 애니메이션이 펼쳐지는데 ( 마치 Flash 같은 자연스럽움을 구현했다. - 이런건 Flash로 하는게 맞다는 게 내 생각이지만 이런 DHTML도 아주 잘 쓰면 나쁠건 없다. )

 구현하는 방법은 간단하다.
사용자 삽입 이미지


 위와 같은 이미지를 준비하고 (이미지 사이즈는 (52x37) * (7x7) )
 <Span> 태그로 원하는 영역만큼 영역의 Layer을 그리고 (여기서는 52 x 37 )
 Background로 위의 이미지를 지정한다.
 마우스가 오버되면 적당한 타이머를 통해서 backgroundPosition을 변경시킨다.

<span id='svc-toolbar'></span>

#svc-toolbar { BACKGROUND: url(svc_sprite_all.gif) no-repeat 0px 0px}

function() { $("svc-toolbar").backgroundPositionX += 52 }

관련글은 여기 어디서 봤던 것 같은데 못 찾겠다. (도움 안되는 정보는 지워 버리고 )

--------------------------------------------------------------------

Cyworld에서도 이러한 방식을 사용 했습니다.
사용자 삽입 이미지

참조 하시고요.
Posted by U_Seung