구글로고 쫌더 상세 분석 (내용추가) 정보
구글로고 쫌더 상세 분석 (내용추가)
관련링크
본문
예전에 제 글중 이미지 칩(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.생각해보니 저 사이트는 행님 님께서 일전에 소개하셨던 사이트입니다.
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.생각해보니 저 사이트는 행님 님께서 일전에 소개하셨던 사이트입니다.
댓글 전체
그리고 익스6에서는 구름이 지나가지 않습니다.ㅋㅋㅋ
ㅎㅎㅎ IE6에선 스크립트표준에 대해서 호환성이 떨어집니다 ㅎㅎ
테스트 감사합니다^^(아 제가 만든것도 아닌데 ㅠㅠ)
테스트 감사합니다^^(아 제가 만든것도 아닌데 ㅠㅠ)
갑자기 저도 궁금해서 크롬으로 서핑하다가 익스6을 띄워보니 역시나 익스6은 동적인 것과는 멀다는 것을 확인했습니다.
개-_삽질;;
ㅋㅋㅋㅋㅋ 근데 저게 코드가 많은건 ani 캐릭터가 많아서 그래요 ㅋㅋㅋㅋㅋ
그거 빼고는 괜찮아요 작업하긴
제가 퍼온것이 개삽, 작업량도 개삽 ㅋㅋㅋ
그거 빼고는 괜찮아요 작업하긴
제가 퍼온것이 개삽, 작업량도 개삽 ㅋㅋㅋ