Please use Chrome browser to view this effect.
HTML Source code:
HTML code
- <! DOCTYPE HTML>
- <html>
- <head>
- <title>HTML5 leaves falling animation-ke keeper </title><base target="_blank" href="http://keleyi.com/keleyi/phtml/css3/" />
- <Meta charset="Utf-8">
- <Meta name="viewport" content="width=500px, initial-scale=0.64">
- <link rel="Apple-touch-icon" href= "http://keleyi.com/keleyi/phtml/css3/15/images/ Apple-touch-icon.png " />
- <!--The leaves.css file animates the leaves---
- <link rel= "stylesheet" href="Http://keleyi.com/keleyi/phtml/css3/15/leaves.css" type= "Text/css" media="screen" charset="Utf-8">
- <script type="Text/javascript" src= "http://keleyi.com/keleyi/pmedia/jquery/ Jquery-1.11.2.min.js "></script>
- <!--The leaves.js file creates the leaves---
- <script src="http://keleyi.com/keleyi/phtml/css3/15/leaves.js" type="Text/javascript " charset="Utf-8"></script>
- </head>
- <body>
- <div style="Text-align:center; Clear:both; margin-top:0px ">
- <span id="keleyi">
- <a href="http://keleyi.com"> Home </a> <a href= "http://keleyi.com/keleyi/phtml/">
- Special Effects Library
- </a> <a href="http://keleyi.com/a/bjae/h1o76nuh.htm"> Original </a > Please use Chrome to view this page.
- </span>
- </div>
- <div id="container">
- <!--the container is dynamically populated using the Init function in Leaves.js--
- <!--its dimensions and position is defined using its ID selector in LEAVES.CSS-
- <div id="Leafcontainer"></div>
- <!--its appearance, dimensions, and position is defined using its ID selector in LEAVES.CSS-
- <div id="message">
- <em> Fall red is not ruthless things </em>
- </div>
- </div>
- </body>
- </html>
Reprinted from: http://keleyi.com/a/bjae/h1o76nuh.htm
HTML5 leaves falling animation
