Create Leaves Falling and Rotating Effects with jQuery and CSS3

Create Leaves Falling and Rotating Effects with jQuery and CSS3
File Size: 108 KB
Views Total:
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:

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.