今天找开google首页,google的logo就像一幅动画一样动了起来,是一种舞姿(葛兰姆式的舞蹈技法(Graham Technique)),好看。挺感兴趣的,我还以为是gif图片呢。
来张截图先
不过google当然不会这么简单的。我弄了弄,把其中的代码给挖了出来。用了几句css,和两张png图片,还有一大段js script。就完成了今天的google logo的作品
Google LOGO 玛莎·葛兰姆 效果预览
先来看看效果哦。 不知直接把代码放进来有没有效果呢。先试一下吧。 不能在文章里实现效果。
效果: http://liucheng.name/wp-content/uploads/20110511googlelogo.html
[iframe height=”156″ width=”403″ src=”http://liucheng.name/wp-content/uploads/20110511googlelogo.html”]
Google LOGO 玛莎·葛兰姆 代码
两张图片:
http://www.google.com.hk/logos/2011/graham11-hp-start.png http://www.google.com.hk/logos/2011/graham11-hp-sprite.png
再来看看代码吧。
div部分
<div id=hplogo><a href="http://www.google.com.hk/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN" target="_blank"><img src="http://www.google.com.hk/logos/2011/graham11-hp-start.png" border=0 alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" title="现代舞先驱玛莎·葛兰姆 117 周年诞辰" /></a></div>
css部分
<style>#hplogo{background:white;cursor:pointer;height:156px;position:relative;width:403px}#hplogo div{pointer-events:none;position:absolute}</style>
js部分
这部分就看太懂了。反正全部放进来、会的童鞋就去研究研究了。
<script>(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]],e=d.length,f,g,h,i,j=-1,k=function(){google.nav&&google.nav.go?google.nav.go("http://www.google.com.hk/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN"):window.location.href="http://www.google.com.hk/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN"},l=function(){var a=d[f],c=document.getElementById("hplogo");if(c&&a[0]){var b=document.createElement("div");b.id="hplogo"+f;b.style.left=a[0]+"px";b.style.top=a[1]+"px";b.style.width=a[2]+"px";b.style.height=a[3]+"px";b.style.background="url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat "+-g+"px "+-h+"px";b.onmousedown=k;a[3]>i&&(i=a[3]);a[4]?(g=0,h+=i,i=0):g+=a[2];c.appendChild(b);++f;f< e&&(j=window.setTimeout(l,83))}},m=function(){google.doodle.a=!1;i=h=g=f=0;j!=-1&&(window.clearTimeout(j),j=-1);for(var a=0;a< e;++a){var c=document.getElementById("hplogo"+a);c&&c.parentNode&&c.parentNode.removeChild(c)}j=window.setTimeout(l,83)};if(!google.doodle.a){google.doodle.a=!0;var n=document.createElement("img");n.addEventListener?n.addEventListener("load",m,!1):n.attachEvent("onload",m);n.src="http://www.google.com.hk/logos/2011/graham11-hp-sprite.png"}}catch(o){google.ml(o,!1,{cause:"DOODLE"})};})();</script>
再多一段JS
原来上面的代码还缺少一些,上面的效果只能在chrome看,在IE和opera下没效果。在前面加多一段js就行了:
<script>window.google={kEI:"iyXKTdaxCIOycKDD0acG",kEXPI:"17259,24472,27147,28505,28555,29509,29685,29794,29822,30035,30107,30152",kCSI:{e:"17259,24472,27147,28505,28555,29509,29685,29794,29822,30035,30107,30152",ei:"iyXKTdaxCIOycKDD0acG",expi:"17259,24472,27147,28505,28555,29509,29685,29794,29822,30035,30107,30152"},authuser:0,ml:function(){},kHL:"zh-CN",time:function(){return(new Date).getTime()},log:function(c,d,b){var a=new Image,e=google,g=e.lc,f=e.li;a.onerror=(a.onload=(a.onabort=function(){delete g[f]}));g[f]=a;b=b||"/gen_204?atyp=i&ct="+c+"&cad="+d+"&zx="+google.time();a.src=b;e.li=f+1},lc:[],li:0,Toolbelt:{}};window.google.sn="webhp";var i=window.google.timers={};window.google.startTick=function(a,b){i[a]={t:{start:(new Date).getTime()},bfr:!(!b)}};window.google.tick=function(a,b,c){if(!i[a])google.startTick(a);i[a].t[b]=c||(new Date).getTime()};google.startTick("load",true);try{window.google.pt=window.external&&window.external.pageT;}catch(v){}var _gjwl=location;function _gjuc(){var b=_gjwl.href.indexOf("#");if(b>=0){var a=_gjwl.href.substring(b+1);if(/(^|&)q=/.test(a)&&a.indexOf("#")==-1&&!/(^|&)cad=h($|&)/.test(a)){_gjwl.replace("/search?"+a.replace(/(^|&)fp=[^&]*/g,"")+"&cad=h");return 1}}return 0}function _gjp(){!(window._gjwl.hash&&window._gjuc())&&setTimeout(_gjp,500)};window._gjp && _gjp()</script>
玛莎·葛兰姆 介绍
玛莎·葛兰姆(英语:Martha Graham,1894年5月11日-1991年4月1日),又译为马莎·格雷厄姆,美国舞蹈家和编舞家,也是现代舞蹈史上最早的创始人之一。
详细看百科吧
玛莎·葛兰姆_互动百科:http://www.hudong.com/wiki/%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86
瑪莎·葛蘭姆- 维基百科,自由的百科全书:http://zh.wikipedia.org/wiki/%E7%91%AA%E8%8E%8E%C2%B7%E8%91%9B%E8%98%AD%E5%A7%86
玛莎·葛兰姆,又译为马莎·格雷厄姆,美国舞蹈家和编舞家,也是现代舞蹈史上最早的创始人之一。葛兰姆出生于美国宾夕法尼亚州阿利根尼县。1910年代受到露斯·圣·丹尼斯的表演启发了对舞蹈的兴趣。
1916年,她进入萧恩舞团及舞蹈学校正式学习舞蹈。1926年,葛兰姆成立了自己的舞团,当时她独特的现代舞也影响了一部份的现代艺术。葛兰姆随后的演出奠定了她在现代舞蹈中的地位,并发展出葛兰姆式的舞蹈技法(Graham Technique)。
~完。
52条回应:“喜欢今天的Google LOGO 玛莎·葛兰姆”
这个看着确实很有意思啊
确实有意思!但是那代码俺看不懂。
不错啊!哈哈,我也喜欢
懂技术就是不一样,很深奥1
只能在Chrome下看啊,那个HTM的连接,Opera IE下看不了
对。。我再看看
找到了多一段js. 终于能在IE下了。你试试看在opera行不行?
呵呵。在文章里加上效果了
呵呵,我看到已经有人把它做成gif了~
呵呵。也很强啊
gif在哪可以看到?? [呲牙]
http://ww1.sinaimg.cn/bmiddle/64112046jw1dh2l5twhxwg.gif
有新浪微博的话,可看:
http://t.sina.com.cn/1678843974/eA3eEcNfWax
=[[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],…..
这些是大图片中每个小图的坐标位置。循环获取。。。就实现了动画效果。
相关阅读:
有个强人也写了个模拟的。有代码下载的
模拟谷歌今日使用的css动画:http://www.cnblogs.com/hooray/archive/2011/05/11/2043122.html
[呲牙]
[…] 附1:后来我发现google原来是把坐标等信息存在js数组里,然后循环添加div元素的时候,把值一并写进去,相关阅读《喜欢今天的Google LOGO 玛莎·葛兰姆》 […]
这个似乎还是有点复杂哟,有个更简单的。http://www.cnblogs.com/hooray/archive/2011/05/11/2043122.html
就是我上面发的嘛。汗~
那是模拟嘛。 简单是简单。 技术上来讲就比google的原代码差多了。。
当然,能写出来就已经非常强大了 [强]
今天还和朋友们讨论这个技术来的,谷歌是一个注重想象力的公司。
我把google的第二个画面之后的复制一下粘贴,就出现了很多数字,传说中的图的坐标
我也超级喜欢了
[…] 附1:后来我发现google原来是把坐标等信息存在js数组里,然后循环添加div元素的时候,把值一并写进去,相关阅读《喜欢今天的Google LOGO 玛莎·葛兰姆》 […]
谷歌很强大啊··我刚刚开始也以为是用的GIF
已经能在IE Fx Opera下正常看了,我也在自己博客放了一份~alyzq.com
从头看到尾,我硬是没看懂。
呵呵。这篇文章昨天带来快1000IP~
谷歌就是牛!
挺有意思的啊!!支持
这个LOGO很有个性哦。
不错喔
我也赞同楼主的!
原来这个不是GIF啊?真强
不错的代码 呵呵 我还以为是gif图片呢!
看着代码好难学啊!
GOOGLE的LOGO经常换的,有时也会细心看看别人的创意设计。。。
端午节快到了,不知这次Google换什么logo呢
这个很强大!
google的logo确实很有创意,他基本上每天一个创意logo
谷歌老大还是比较牛的。
[…] to see garden front page:Simulation Google today use CSS animation (46/7689, 27)And inside theLike today’s Google LOGO, Martha homegrown technique"On Google to realize the special […]
撒打算打算
很好,昨天看到的哪个小提琴,做的更好
原来你就是柳城啊,用过你设计的很多插件,你怎么这么强啊!崇拜!
这绝对是屎上谷歌最炫丽的Logo,至少我是第一次见到,被他惊艳到了。。
是HTML5的效果吧!低版本的IE应该支持不了这么绚丽的效果!
google很有活力,不像baidu死气沉沉的
这一段 动态 logo真牛.
Google Doodle设计都很棒,我尤其喜欢吃豆人的那个,还能玩游戏。
图片很给力,代码看晕了
经典,我也很喜欢很喜欢
[…] Attach 1: then I found out Google is the original information such as the coordinate existing js array, and then add the circulation, div elements together in the value write, read the relatedLike today’s Google LOGO, Martha homegrown technique》 […]
google经常都换logo的这个是很经典的一个。支持
这个动态Google Logo 实在太酷了
没看懂什么东西