在 Google 搜索 Let it snow 的效果是怎么实现的?

搜索页面 http://www.google.com.hk/search?sourceid=chrome&ie=UTF-8&q=let+it+snow

回复内容:

雪花是一个个 ❄ ❆ ❅ 符号,通过 JavaScript 不段地改变其父级元素的位置,从而控制它们随机摆动、落下。雪花的大小、颜色由随机生成的,在一定范围内的 font-size 和 color 属性来控制。

雪花的数目应该是固定的(200 个),也就是说,当雪花掉到地上后,会从天空上重新飘下来。

结冰的效果是通过在一个覆盖全屏幕的 canvas 上绘制霜状图形的方式实现的。霜状图形的颜色是透明的,比如底层浅蓝色的 rgba 值就是(240, 246, 246, 0.08)。

程序会检测鼠标事件,当鼠标按下时,会将鼠标坐标周围一块面积内的图形清空,来达到除霜的效果。

点击 Defrost 将会把 canvas 移除,从而去掉了霜层。

思路很简单,关键是 JavaScript 动画的优化。1.在keyword == let+it+snow时,向常规dom中添加一个大小覆盖viewport的div(层级位置高于原有dom)
2.不停地向该div中添加绝对定位的雪花符号(所有的符号都在不停变动位置)。
3.在上面的容器之上,添加canvas层,并使用canvas的特殊css属性pointer-events,藉以达到鼠标穿透事件发生后,令canvas层下面的元素可以使用的目的。

P.S:没搞清楚怎么实现整屏雾气效果的,抛块砖头先。这个效果我去年过圣诞节的时候做过 原理一楼已经讲过了 我就直接来个现成的实现把

这个脚本简单好用 易于实现 如果想看原理 就读一读 源代码把

http://www.schillmania.com/projects/snowstorm/

let it snow
window.google={kEI:”T_fuTq3MD4iA2wXqqrSoDw”,getEI:function(a){var b;while(a&&!(a.getAttribute&&(b=a.getAttribute(“eid”))))a=a.parentNode;return b||google.kEI},https:function(){return window.location.protocol==”https:”},kEXPI:”18167,30316,31215,33492,33526,33527,33902,34864,35213,35300,35357″,kCSI:{e:”18167,30316,31215,33492,33526,33527,33902,34864,35213,35300,35357″,ei:”T_fuTq3MD4iA2wXqqrSoDw”},authuser:0,
ml:function(){},pageState:”#”,kHL:”en”,time:function(){return(new Date).getTime()},log:function(a,b,c,e){var d=new Image,g=google,h=g.lc,f=g.li,j=””;d.onerror=(d.onload=(d.onabort=function(){delete h[f]}));h[f]=d;if(!c&&b.search(“&ei=”)==-1)j=”&ei=”+google.getEI(e);var i=c||”/gen_204?atyp=i&ct=”+a+”&cad=”+b+j+”&zx=”+google.time(),k=/^http:/i;if(k.test(i)&&google.https()){google.ml(new Error(“GLMM”),false,{src:i});
delete h[f];return}d.src=i;g.li=f+1},lc:[],li:0,j:{en:0,l:function(){google.fl=true},e:function(){google.fl=true},b:location.hash&&location.hash!=”#”,bv:20,cf:”osb”,pm:””,pl:[],mc:0,sc:0.5,u:”d937558e”},Toolbelt:{},y:{},x:function(a,b){google.y[a.id]=
[a,b];return false}};

在 Google 搜索 Let it snow 的效果是怎么实现的?

snowyfog.9.js 在

https://gist.github.com/1493708

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    使用<header>,<footer>,<nav>等h5标签,和全部使用<div>有什么区别??

    2025-3-29 20:07:40

    编程技术

    把 HTML5 简称为 H5 的人,会把 CSS3 说成 C3 吗?

    2025-3-29 20:08:38

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索