Christmas Snow

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 is to 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 Chirstmas!

 Tagged with: , , , , ,

3 thoughts on “Add some Christmas Cheer to your Website

  • I am getting a Javascript error that says this, TypeError:$(…).get(…) is undefined on the snowfall.jquery.js near line 111. Any idea what this is?

     Reply

    • Do you have jQuery included?

       Reply

      • I gotter working. I did have it included, but not sure how I got it working… Just started working lol.

         Reply

Leave a Reply

Mojowill Avatar

Who the Hell am I?

I'm Will, a full time web developer, geek and musician. I develop using PHP and MySQL and spend most of my time working with WordPress or CakePHP. When I'm not buried in code I'm gaming, cooking or writing and recording music in my studio. I like sci-fi, pancakes and coffee and am totally prepared for the zombie apocalypse...

Stalk me on these other sites...

Why not be super creepy and check me out on all these other sites, I think they call it social media?