Realistic Snow Falling Animation With jQuery And GSAP
File Size: | 3.45 KB |
---|---|
Views Total: | 2530 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
In this tutorial I will be showing you how to do a realistic falling snow effect with the combination of jQuery and GSAP's TweenMax library.
What we are going to create is an animated snow flurry or snow shower--a typical random weather scene that appears when we look at a window during the winter season.
How to use it:
1. Create a container element on which the plugin renders the snow falling animation.
<div id="snow-animation-container"></div>
/* example CSS */ #snow-animation-container { position: fixed; width: 100%; height: 100%; overflow: hidden; }
2. Load the required jQuery and TweenMax.js libraries (for fast and smooth animations) in the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/TweenMax.min.js"></script>
3. Download the package and insert the main script script.js
after jQuery. That's it.
<script src="script.js"></script>
4. Config the snow falling effect.
- MAX_SNOW: maximum number of snowflakes to generate
- MAX_SNOW_SIZE: maximum size of snowflakes
- MAX_SNOW_SPEED: maximum animation speed in seconds
var MAX_SNOW = 200; var MAX_SNOW_SIZE = 7; var MAX_SNOW_SPEED = 1;
This awesome jQuery plugin is developed by moblamobla. For more Advanced Usages, please check the demo page or visit the official website.