Create Leaves Falling and Rotating Effects with jQuery and CSS3
File Size: | 108 KB |
---|---|
Views Total: | 5631 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A fancy jQuery plugin that makes use of jQuery rotate plugin to create leaves falling and rotating effects on your web page. Click the falling leaf to see more magical effects.
Your might also like:
- Realistic Raindrops Effect with Canvas and Rainyday.js
- Creating Snow Falling Effect with jQuery snowfall Plugin
How to use it:
1. Include necessary jQuery javascript library and jQuery rotate plugin in the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="js/jquery.rotate.js"></script>
2. Include the jQuery ClassyLeaves plugin's javascript and CSS after jQuery library.
<script src="js/jquery.classyleaves.min.js"></script> <link rel="stylesheet" href="css/jquery.classyleaves.min.css" />
3. The javascript to create the effect on page load.
<script> $(document).ready(function() { var tree = new ClassyLeaves({ leaves: 50, // number of leaves to spawn initially maxY: 100, // spread size multiplyOnClick: true, // whether to multiply the leaf when the user clicks on it multiply: 1, // number of images to spawn when clicking on a leaf infinite: true, // if you want the leaves to never stop falling speed: 3000, // speed of the falling leaf animation numImages: 8, // total number of images in the leaves folder folder: 'images/leaves/' // the folder containing the leaf images }); }); </script>
This awesome jQuery plugin is developed by jquery. For more Advanced Usages, please check the demo page or visit the official website.