이번 구글의 로고는 순수 CSS애니메이션입니다. 정보
이번 구글의 로고는 순수 CSS애니메이션입니다.
본문
마사 그레이엄 탄생 117주년

그래서 소스를 살펴보면
function(){try{if(!google.doodle)google.doodle={};var d=[[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88],[305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83],[307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84],[306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85],[306,52,91,85],[308,51,88,87,1],[308,50,88,88],[308,49,88,88],[307,49,89,88],[307,50,89,87],[308,51,89,86],[307,54,90,83],[307,57,90,80],[306,58,92,79],[306,58,92,79],[305,60,92,77],[302,61,95,76],[302,63,95,74],[302,51,96,86],[302,66,98,71],[304,67,96,69],[301,63,96,74],[301,58,93,79],[291,52,94,85],[288,50,71,88],[285,43,76,95],[285,37,70,101],[281,29,55,109],[278,20,58,119],[278,20,55,119,1],[277,12,121,127],[271,2,122,138],[267,1,126,139],[264,0,136,140],[260,0,141,140],[255,0,148,140],[252,0,151,140],[249,2,121,138],[247,3,123,137],[246,3,123,137],[246,2,124,137],[258,2,112,137],[263,2,106,137],[263,2,106,137],[262,2,103,137],[260,2,104,136],[260,2,104,137,1],[268,2,98,137],[267,2,99,137],[266,2,97,137],[266,3,96,136],[264,3,99,136],[263,3,100,136],[261,3,100,136],[259,2,138,137],[254,2,126,137],[247,2,101,136],[240,2,108,136],[238,1,110,137],[230,1,118,138],[220,15,128,124],[211,18,137,121],[205,43,102,96],[202,45,104,93],[200,38,97,101],[198,38,104,101,1],[197,39,107,100],[197,39,112,100],[213,39,94,110],[212,40,95,111],[211,41,97,111],[209,42,99,112],[209,43,98,112],[213,43,87,112],[213,42,83,113],[211,40,86,109],[211,38,86,103],[211,37,88,112],[211,20,186,131],[213,27,167,122],[212,44,87,105],[210,44,88,98],[195,44,106,98],[189,44,110,98],[182,46,117,99],[173,44,118,96,1],[161,43,130,99],[154,42,137,97],[153,42,137,97],[153,42,137,97],[152,41,137,98],[151,41,137,97],[149,41,145,97],[148,25,144,114],[148,13,144,126],[141,12,153,127],[115,11,173,128],[108,7,180,133],[108,4,180,136],[108,3,176,137,1],[108,1,161,139],[105,1,235,138],[103,1,295,148],[103,0,277,149],[108,0,234,137],[101,0,232,137],[99,0,135,139],[95,0,244,139],[81,0,152,139],[69,0,164,139,1],[66,0,169,139],[65,0,170,139],[63,0,168,138],[61,0,159,138],[35,0,304,139],[19,0,189,140],[18,11,138,129],[18,11,137,129],[18,11,137,128],[18,6,135,133],[7,4,146,136],[6,4,147,136],[3,4,150,136,1],[3,5,150,135],[3,8,150,132],[4,6,394,145],[12,6,388,145],[11,8,389,144],[11,8,387,144],[11,8,387,143,1],[10,8,113,131],[11,8,111,131],[10,9,112,130],[12,9,116,130],[12,9,111,130],[12,9,111,130],[12,9,110,131],[12,34,113,106],[13,35,110,104]
좌표와 위치값으로 움직이는게 표시되어있습니다^^!
댓글 전체
흠 오늘 안바쁘신 듯.. ㅎㅎ
ㅎㅎㅎ 안바쁘지 않습니다^^ 일이 많아요!
그러나 놀땐 확실히놀아요^^*
(왠지 노는거 같지 않지만요 ㅠㅠㅠㅠ)
그러나 놀땐 확실히놀아요^^*
(왠지 노는거 같지 않지만요 ㅠㅠㅠㅠ)
ㅎㅎ 넵! 저것은 position:relative 한 영역안에서 이미지의 영역의 꼭지점 좌표만 지정한것이라서^^!
구글이 이런짓도 하는군요.. ㅠㅠ
GIF로 만드는거보다 좋나요? ㅠㅠ
GIF로 만드는거보다 좋나요? ㅠㅠ
서버보다 클라이언트컴퓨터의 자원을 활용하는거니
서버의 부하를 덜어줍니다 ㅎㅎㅎ
하지만 움직임은 고퀄리티가 가능하죠^^!
다만... 저것을 디자인하는 디자이너가 죽어납니다^^
서버의 부하를 덜어줍니다 ㅎㅎㅎ
하지만 움직임은 고퀄리티가 가능하죠^^!
다만... 저것을 디자인하는 디자이너가 죽어납니다^^
sprite 네요.....
음 그렇게 보이실 수 있지만, ㅎㅎㅎ
CSS와 JS가 함께 만들어낸 css 애니메이션 기법입니다.
스프라이트 그래픽스 기술과는 다릅니다^^
말씀하신 기술에 가까운것은
http://sir.co.kr/bbs/board.php?bo_table=cm_free&wr_id=560932#c_560947
요것이 더 가깝겠지만 ..ㅎ 역시 CSS Animation입니다.ㅎㅎ
CSS와 JS가 함께 만들어낸 css 애니메이션 기법입니다.
스프라이트 그래픽스 기술과는 다릅니다^^
말씀하신 기술에 가까운것은
http://sir.co.kr/bbs/board.php?bo_table=cm_free&wr_id=560932#c_560947
요것이 더 가깝겠지만 ..ㅎ 역시 CSS Animation입니다.ㅎㅎ
예전에 구글 하단에 메뉴가 있었는데 그 메뉴 또한 gif 이미지를 잘라 사용했었지요..ㅋ
요번 이미지는 역동적이군요 ㅎㅎㅎㅎ
요번 이미지는 역동적이군요 ㅎㅎㅎㅎ
관련기술은 2008년도에 최초로 나왔었는데 ㅎㅎ
정말 잘 활용하고있는 포털의 사례는 구글입니다.ㅎㅎ
정말 잘 활용하고있는 포털의 사례는 구글입니다.ㅎㅎ
저도 이거보고 파일보니 png..
소스보곤 김기절........ 어렵네요.. css
소스보곤 김기절........ 어렵네요.. css
ㅎㅎㅎ 어렵지 않아요 ㅋㅋ
오히려 플래시 보다 쉽습니다!
문제는 자바스크립트지염!ㅎㅎㅎㅎ
오히려 플래시 보다 쉽습니다!
문제는 자바스크립트지염!ㅎㅎㅎㅎ