Freebie: jQuery Falling Leaves
Today’s freebie is a jQuery powered falling leaves animation. Autumn is at our doorstep and with our animation you can add falling leaves to your website. It is meant to be a fullscreen animation of leaves that fall from the top of your site to the bottom. You have three types of leaves available which can be seen in a preview. You can easily replace the leaf by adding it to javascript file which is well documented. You can change many parameters of animation within javascript file like type of leaf, rotation speed, falling speed, number of leaves, size of leaves and fps.
If you like this animation also check our WordPress Falling Leaves plugin which will allow you to add falling leaves animation to your ads and banners.
All resources are created by PremiumCoding and are free of charge with little restriction. If you would like to show support please take a look at some of our WP plugins and Flash files.
Falling Leaves preview – Maple Leaf!
Falling Leaves preview – All leaf types!
Falling Leaves preview – No Background
Download Freebie: jQuery Falling Leaves (2322)
SCREENSHOT
INCLUDED FILES
- jQuery files
- HTML files
- AI files (leaves)
- jpg and png images
QUICK GUIDE
Modifying JS (menu.js) file:
- Gravitation – parameter speedC defines the falling speed of leaves. Increase this number to increase speed of fall.
- Rotation – parameter rotation defines how much each leaf rotates, rotation is calculated with speed of fall to achieve realistic effect of rotation.
- Rotation (true or false) – parameter rotationTrue defines whether rotation is applied or not, 1 means rotation is active, 0 means rotation is inactive.
- Number of leaves – parameter numberOfLeaves defines how many leaves appear on stage. Set the number to anything you would like.
- Size of leaves – parameter size defines the general size of leaves. Final size is then generated randomly to achieve a more realistic effect (same as speed and rotation).
- Type of leaf – parameter typeOfLeaf defines which type of leaf will appear. You have 4 possibilities: 0 – type 1, 1- type 2, 2 – type3, 3 – all types combined.
- FPS – parameter that defines fps used, simply increase or decrease number to get the desired fps.
All resources made available under category Freebies on PremiumCoding are free for use in both personal and commercial projects.
You may freely use resources, without restriction, in software programs, web templates and other materials intended for sale or distribution. No attribution or backlinks are required, but it’s always nice to be credited. Any links or nice words are always appreciated.
Tags: autumn, falling leaves, jquery falling leaves, leaf
14 Comments for Freebie: jQuery Falling Leaves
October 4, 2011 at 7:04 am
Wonderful n romantic freebie
as my choice 
i am going to get it 
October 4, 2011 at 12:15 pm
Glad you like it:). Enjoy.
December 30, 2011 at 12:29 am
Is it possible to have the script run within a container rather than be active across the entire page?
January 3, 2012 at 10:03 am
Not at the current state, if you would like falling leaves animation over an image you can check our wordpress plugin for it:
http://premiumcoding.com/wordpress-falling-leaves-plugin
Best regards,
Team PremiumCoding
October 24, 2012 at 5:17 pm
Having trouble with the leaves in ie (go figure
they are at approx 50% opacity the entire time – do you have a fix?
Thanks!
October 25, 2012 at 5:38 am
Hi,
IE doesn’t have these kind of animations (who would have thought that huh:)). Hopefully IE10 will have support for them but for now this is limited to webkit browsers.
Best regards
November 15, 2012 at 11:45 am
I get this error always…
Uncaught TypeError: Property ‘$’ of object [object Window] is not a function
changed it to document and body, but still, it will remain the same.
kind regards
December 10, 2012 at 12:36 pm
i have embedded a vimeo video … but the leaves fall over the top of it…how can i make the leaves fall behind the embedded vimeo ?
December 10, 2012 at 5:05 pm
Hi,
Try setting the z-index of the video to z-index:9999;
Best regards
December 12, 2012 at 10:17 am
awesome thank you
1 more thing…is there a way to set the width and height of the area the leaves fall in?? say 600px x 600px ?…as they seem to be making my page jump around abit (scrollbars appear and disappear etc…)
December 13, 2012 at 12:43 pm
Hi,
you will have to edit the file called leaves_falling.js which can be found in the js directory. Play with the values found on lines 48-60, and also from 64-66. Variables that define this motion are strafey and strafex.
Best regards
December 13, 2012 at 10:24 am
any ideas?
December 14, 2012 at 11:07 am
cant seem to figure it out..want it to fall within an 800×640 area in the centre top of the page?
May 2, 2013 at 3:26 am
Man, It’s amazing…but it is slow other jquerys…