new example for the holidays

zeke · Dec 20, 2011 · 9028de5 · 9028de5
1 parent c2580e3
commit 9028de5
Showing 1 changed file with 43 additions and 0 deletions.
diff --git a/examples/snow/index.html b/examples/snow/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Let it snow with Zepto.js</title>
+    <meta name="name" content="content">
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+    <style>
+      body { background: #000; color: #fff; overflow: hidden }
+      div { position: absolute; }
+    </style>
+  </head>
+  <body>
+
+  <script src="../../src/zepto.js"></script>
+  <script src="../../src/event.js"></script>
+  <script src="../../src/fx.js"></script>
+
+  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://zeptojs.com/let-it-snow" data-text="Let it snow with Zepto.js" data-via="zeptojs" data-lang="en">Tweet</a>
+  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+
+  <script>
+    $(function(){
+      var flakes = [], i = 100, glyphs = '❄❅❆'.split('');
+
+      function rand(max){
+        return Math.floor(Math.random()*max);
+      }
+
+      function addFlake(){
+        var el = $('<div><div>' + glyphs[rand(glyphs.length)] + '</div></div>');
+        $('body').append(el);
+        el.css({ left: rand(100)+'%', top: -100-rand(500), fontSize: 20+rand(30) });
+        el.anim({ translateY: 1500+rand(500)+'px', translateX: 50-rand(100)+'px', rotate: (2e3-rand(4e3))+'deg' }, 6+rand(10), 'linear', addFlake);
+        flakes.push({ el: el });
+      }
+
+      while(i--) addFlake();
+
+      console.log(flakes)
+    });
+  </script>
+  </body>
+</html>