喜欢今天的Google LOGO 玛莎·葛兰姆
今天找开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)。
~完。
有点相关的文章
- 让Google给你的网站加速,快马加鞭,节省流量 (1.000)
- Google robots 机器人支持的meta 标签及其用法 (1.000)
- 试用Google强大的Search Element (1.000)
- 301重定向及百度、Google收录分析 (1.000)
- Google Doodle 玛莎·葛兰姆的GIF版本 (1.000)
- PHP split函数弃用 (RANDOM - 0.500)
这个看着确实很有意思啊
确实有意思!但是那代码俺看不懂。
不错啊!哈哈,我也喜欢
懂技术就是不一样,很深奥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
[呲牙]
这个似乎还是有点复杂哟,有个更简单的。http://www.cnblogs.com/hooray/archive/2011/05/11/2043122.html
就是我上面发的嘛。汗~
那是模拟嘛。 简单是简单。 技术上来讲就比google的原代码差多了。。
当然,能写出来就已经非常强大了 [强]
今天还和朋友们讨论这个技术来的,谷歌是一个注重想象力的公司。
我把google的第二个画面之后的复制一下粘贴,就出现了很多数字,传说中的图的坐标
我也超级喜欢了
谷歌很强大啊··我刚刚开始也以为是用的GIF
已经能在IE Fx Opera下正常看了,我也在自己博客放了一份~alyzq.com
从头看到尾,我硬是没看懂。
呵呵。这篇文章昨天带来快1000IP~
谷歌就是牛!
挺有意思的啊!!支持
这个LOGO很有个性哦。
不错喔
我也赞同楼主的!
原来这个不是GIF啊?真强
不错的代码 呵呵 我还以为是gif图片呢!
看着代码好难学啊!
GOOGLE的LOGO经常换的,有时也会细心看看别人的创意设计。。。
端午节快到了,不知这次Google换什么logo呢
这个很强大!
google的logo确实很有创意,他基本上每天一个创意logo
谷歌老大还是比较牛的。
撒打算打算
很好,昨天看到的哪个小提琴,做的更好
原来你就是柳城啊,用过你设计的很多插件,你怎么这么强啊!崇拜!
这绝对是屎上谷歌最炫丽的Logo,至少我是第一次见到,被他惊艳到了。。
是HTML5的效果吧!低版本的IE应该支持不了这么绚丽的效果!
google很有活力,不像baidu死气沉沉的
这一段 动态 logo真牛.
Google Doodle设计都很棒,我尤其喜欢吃豆人的那个,还能玩游戏。
图片很给力,代码看晕了
经典,我也很喜欢很喜欢
google经常都换logo的这个是很经典的一个。支持
这个动态Google Logo 实在太酷了
没看懂什么东西