구글로고 쫌더 상세 분석 (내용추가)

구글로고 쫌더 상세 분석 (내용추가) > 자유게시판

자유게시판

구글로고 쫌더 상세 분석 (내용추가) 정보

구글로고 쫌더 상세 분석 (내용추가)

엔피씨 홈페이지 자기소개 아이디로 검색 회원게시물 (58.♡.♡.244)
2011.04.22 10:53:09
2,936

본문

예전에 제 글중 이미지 칩(image chip)에 관한 글을 보신적있으신가요^^
http://sir.co.kr/bbs/board.php?bo_table=cm_free&wr_id=500881

그 방식에서 CSS와 스크립트를 이용한 CSS애니메이션을 응용한 기술입니다^^
아주예전에 제 운둔형외톨이 사이트인 p9183을 통해서 실험하고 올렸던 적이있었는데요 ㅎㅎㅎ
(지금은 리뉴얼로 내려놓았습니다)
css로 이미지 포지셔닝한것을, js에서 마우스 온 하는 순간에 특정 포지션값으로 증가시키면서 이미지가 움직이는 것처럼 느껴지게 만든것입니다.

구글로고 구성은이렇습니다.

1. 배경 칩

2. 상위레이어 폭포수(ani GIF)

3. 각종 동물들의 애니메이션을 위한 캐릭터 칩.(너무 많아서 요것만 올립니다)

4. 상세배경 and 관련 캐릭터칩(지금와서 보면 캐릭터칩은 depth순으로 함께 포함되어있네요^^)

이런구성입니다. ㅎㅎㅎ

js로 css의 position값을 증감 시켜 애니메이션 시키는것입니다^^

----------------------
링크 1은 css3를 이용한 애니메이션입니다^^ IE빼고 (크롬, 사파리, 파이어폭스, 오페라) 보실수있습니다^^
링크 2는 css3를 이용한 애니메이션 만든 제작자의 홈입니다. (많은 css3 애니가 있습니다)

ps.생각해보니 저 사이트는 행님 님께서 일전에 소개하셨던 사이트입니다.