Add some Christmas Cheer to your Website
It’s that time of year again, Christmas is only a few short weeks away and why not share some festive cheer with your visitors. With jQuery Snowfall you can.
jQuery Snowfall is a jQuery plugin that adds a subtle snow effect to your website and is super simple to setup. Let’s take a look.
Firstly download the latest version of jQuery Snowfall and extract the contents.
Next upload snowfall.min.jquery.js to your web host.
Now you need to include both jQuery and the Plugin:
For HTML:
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/snowfall.min.jquery.js"></script>
</head>For WordPress (inside your functions.php)
function custom_js() {
wp_register_script( 'snowfall-js', get_template_directory_uri() . '/js/snowfall.min.jquery.js', array( 'jquery' ), 1.5, false );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'snowfall-js' );
}
add_action( 'wp_enqueue_scripts', 'custom_js' );Obviously be sure to get your own paths correct.
Now we need to initialise the Snowfall effect. There are lots of options you can find on the Plugin page but let’s get going with a few basics. Create a new JavaScript file and include the following: (I have done mine using jQuery no-conflict mode as I do most of my development with WordPress)
jQuery(document).snowfall( { flakeCount : 45, maxSpeed : 2, minSize : 2, maxSize : 6, round : true } );Very quickly we are initialising the Snowfall effect; setting the maximum flakecount to 45, setting the speed of the snow, setting the minimum and maximum speed of the snow and setting it to be round.
Now all we need to do is add this script!
For HTML:
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/snowfall.min.jquery.js"></script>
<script src="js/custom.js"></script>
</head>For WordPress (inside your functions.php)
function custom_js() {
wp_register_script( 'snowfall-js', get_template_directory_uri() . '/js/snowfall.min.jquery.js', array( 'jquery' ), 1.5, false );
wp_register_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array( 'jquery', 'snowfall-js' ), 1.0, false );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'snowfall-js' );
wp_enqueue_script( 'global-js' );
}
add_action( 'wp_enqueue_scripts', 'custom_js' );Now if you’ve done everything correctly (remember the code above are only basic examples!) you should see some beautiful drifting snow!
Be sure to check out the jQuery Snowfall Plugin Page yourself for more features and tips!
Merry Christmas!
Filed under Developer. No comments, on purpose.