在 Google 搜索 Let it snow 的效果是怎麼實現的？

01-14

搜索頁面 http://www.google.com.hk/search?sourceid=chromeie=UTF-8q=let+it+snow

雪花是一個個 ? ? ? 符號，通過 JavaScript 不段地改變其父級元素的位置，從而控制它們隨機擺動、落下。雪花的大小、顏色由隨機生成的，在一定範圍內的 font-size 和 color 屬性來控制。

雪花的數目應該是固定的（200 個），也就是說，當雪花掉到地上後，會從天空上重新飄下來。

結冰的效果是通過在一個覆蓋全屏幕的 canvas 上繪製霜狀圖形的方式實現的。霜狀圖形的顏色是透明的，比如底層淺藍色的 rgba 值就是（240, 246, 246, 0.08）。

程序會檢測滑鼠事件，當滑鼠按下時，會將滑鼠坐標周圍一塊面積內的圖形清空，來達到除霜的效果。

點擊 Defrost 將會把 canvas 移除，從而去掉了霜層。

思路很簡單，關鍵是 JavaScript 動畫的優化。

這個效果我去年過聖誕節的時候做過原理一樓已經講過了我就直接來個現成的實現把

這個腳本簡單好用易於實現如果想看原理就讀一讀源代碼把

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

1.在keyword == let+it+snow時，向常規dom中添加一個大小覆蓋viewport的div(層級位置高於原有dom)

2.不停地向該div中添加絕對定位的雪花符號（所有的符號都在不停變動位置）。

3.在上面的容器之上，添加canvas層，並使用canvas的特殊css屬性pointer-events，藉以達到滑鼠穿透事件發生後，令canvas層下面的元素可以使用的目的。

P.S:沒搞清楚怎麼實現整屏霧氣效果的，拋塊磚頭先。

&&&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(!cb.search("ei=")==-1)j="ei="+google.getEI(e);var i=c||"/gen_204?atyp=ict="+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.hashlocation.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}};

&&&

snowyfog.9.js 在

https://gist.github.com/1493708