Friday, December 23, 2011

"Let it snow" - on your webpage

Googles latest easter egg:  If you search for "let it snow" your screen will become foggy from all the snow coming down.


Here is an explanation how to use the slightly modified javascript to have it snow on your webpage as well. The following code goes into your html-file - best at the end of your content before the "</body>" tag :

<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<div id="gbqfb" style="z-index: 1000;"></div>
<div id="snfloader" style="visibility: hidden;"></div>
<script id="snfloader_script" type="text/javascript">
(function(){
var s=document.createElement('script');
s.src='snfog.js'; s.type = 'text/javascript';
s.async=true;
s.addEventListener('load',function(){console.log("snow loaded");
var app = new goog.egg.snowyfog.Snowyfog();app.init();},false);
document.getElementById('snfloader').appendChild(s);})();</script>


The snowyfog-mod.js (you can just save it with right click from here) goes into the same directory as your html file.


Update: You need to include the Google JS api to have the "google"-environment available. Please add your API-key which you can get in the Google API-Console. The script tag should be added in the head section:

<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>


Here is the example page with minimal requirements: Let it snow!


When opening your page it will slowly go foggy. After a while a button called "Defrost" will appear and all the fog will be removed after clicking. Snowflakes will continue to fall. Try it out.


Here is an example: 

2 comments:

nMark said...

I can't get this to work, the console prints out error message of "google is not defined
[Break On This Error] if (!google || !google.snowyfogInited) {
snfog.js (line 860)"

Gmaps Gaier said...

The Google JS api was missing. Thas has been added in the example http://www.realindoor.com/snow.html