| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <!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>
- $(document).ready(function(){
- var 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',
- function(){
- addFlake()
- el.remove() // garbage collect
- }
- )
- }
- while(i--) addFlake()
- // enable for extra fun
- //window.ondeviceorientation = function(event){
- // ('alpha' in event) && $('body').css({ '-webkit-transform': 'rotate('+event.alpha+'deg)'})
- //}
- })
- </script>
- </body>
- </html>
|
