google纪念牛顿特效
2010-01-04 09:35
232 查看
今天是英国伟大的数学家、物理学家艾萨克·牛顿(Isaac Newton)的诞辰,google为其做了纪念logo。Logo做的符合主题又生动俏皮,下面看图
图一
图二
图一中的苹果按照图二中的轨迹掉在地上,具体效果看这里不得不佩服logo设计师的想象力。
效果看到了,下面看一下是怎么实现的。先看下源码:
<img src="newton09-apple.png" style="visibility: hidden" alt="" />
<a href="" target="_blank">
<img src="newton09-tree.jpg" width="384" height="138" border="0" alt="艾萨克牛顿" title="艾萨克牛顿" id="logo" style="margin-top: -1.22em" onload="window.lol&&lol();setTimeout(function(){var h=0,v=1,f=document.getElementById('fall'),i=setInterval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b>-210){v+=2}else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0}}},25);},2000)"/></a>
<img alt="gudao" id="fall" src="newton09-apple.png" style="position: relative; right: 248px; bottom: 46px" />
<noscript>
<style type="text/css">#fall{bottom: -210px !important;}</style>
</noscript>
(注:google的源代码是经过压缩的(原始代码请自行查看google页面源代码),以上代码经过格式处理并有轻微变动)
看了上面的代码您是不是已经感觉很简单,主要代码就是这一段
onload="window.lol&&lol();setTimeout(function(){var h=0,v=1,f=document.getElementById('fall'),i=setInterval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b>-210){v+=2}else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0}}},25);},2000)"
可能您会说“不就是一个图片上加了点js动画吗?”。是的,Google就是这样,用简单的技术实现令人惊叹的效果。
这是我提取出来的源代码,感兴趣的可以研究研究,或者按照自己的需求添加更炫的效果。
图一
图二
图一中的苹果按照图二中的轨迹掉在地上,具体效果看这里不得不佩服logo设计师的想象力。
效果看到了,下面看一下是怎么实现的。先看下源码:
<img src="newton09-apple.png" style="visibility: hidden" alt="" />
<a href="" target="_blank">
<img src="newton09-tree.jpg" width="384" height="138" border="0" alt="艾萨克牛顿" title="艾萨克牛顿" id="logo" style="margin-top: -1.22em" onload="window.lol&&lol();setTimeout(function(){var h=0,v=1,f=document.getElementById('fall'),i=setInterval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b>-210){v+=2}else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0}}},25);},2000)"/></a>
<img alt="gudao" id="fall" src="newton09-apple.png" style="position: relative; right: 248px; bottom: 46px" />
<noscript>
<style type="text/css">#fall{bottom: -210px !important;}</style>
</noscript>
(注:google的源代码是经过压缩的(原始代码请自行查看google页面源代码),以上代码经过格式处理并有轻微变动)
看了上面的代码您是不是已经感觉很简单,主要代码就是这一段
onload="window.lol&&lol();setTimeout(function(){var h=0,v=1,f=document.getElementById('fall'),i=setInterval(function(){if(f){var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v;f.style.right=r+'px';f.style.bottom=b+'px';if(b>-210){v+=2}else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0}}},25);},2000)"
可能您会说“不就是一个图片上加了点js动画吗?”。是的,Google就是这样,用简单的技术实现令人惊叹的效果。
这是我提取出来的源代码,感兴趣的可以研究研究,或者按照自己的需求添加更炫的效果。
相关文章推荐
- Google纪念牛顿Doodle的特效
- Google Logo掉苹果:纪念牛顿
- Google 开发者大会纪念 T 恤赠送(全球限量)
- GOOGLE 20120409 骏马图 主页特效 <Doodle 跑马灯 源码>
- Js特效--模仿滚动条(兼容IE8+,FF,Google)
- GOOGLE的音乐LOGO——纪念电吉他大师萊斯·保羅
- Google纪念遗传学之父孟德尔诞辰一百周年图标
- 类似 Google Tips 页面的卡片式提示和翻转特效
- 萨缪尔摩尔斯诞辰日,Google推出纪念Logo
- Google今日涂鸦:纪念居里夫人诞辰144周年
- 做的一个基于jquery的联想输入的特效框架,类似于百度、google的输入
- Google+和Google Now Listview滑动特效
- 查看google首页的js特效...
- 一个较精简的仿Google首页特效
- Google logos 纪念电吉他大师莱斯·保罗(LesPaul)演示
- Google首页挂链接纪念乔布斯
- google首页,纪念pac man 30周年
- 仿百度、Google的suggest特效功能,源码分析
- 我的文章被google搜到了,截图做个纪念
- android特效开发==纪念