在 Google 搜索 Let it snow 的效果是怎麼實現的? | 知乎問答精選

 

A-A+

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

2018年10月10日 GOOGLE, 知乎問答精選 暫無評論 閱讀 3 ℃ 次

搜索頁面 google.com.hk/search

【薛天祿的回答(42票)】:

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

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

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

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

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

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

【Clement的回答(3票)】:

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

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

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

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

【ZX的回答(3票)】:

<!doctype html><head><title>let it snow</title>

<script>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}};

</script>

</head>

<body bgcolor="#000000" id="gsr">

<div id="snfloader">

<script id="snfloader_script">(function(){var s=document.createElement('script');s.src='snowyfog.9.js';s.async=true;s.addEventListener('load',function(){var app = new goog.egg.snowyfog.Snowyfog();app.init();},false);document.getElementById('snfloader').appendChild(s);})();</script>

</div>

<div>

<div id="cnt">

<div class="mw"><div id="bfoot"></div>

<script type="text/javascript">(new Image()).src="snow.gif";</script>

<noscript>

<img src="snow.gif" height=1 width=1 alt=""></noscript>

</div>

</div>

</div>

</body>

?

?

?

?snowyfog.9.js 在

gist.github.com/1493708

?

【張軒的回答(2票)】:

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

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

schillmania.com/projects

標籤:-谷歌-(Google) -前端開發 -JavaScript -HTML5 -薛天祿


相關資源:





給我留言