Chat with us, powered by LiveChat
The downtown mall in my beautiful hometown, Cumberland, MD

I have a law that I abide by. I call it Monti’s First Law of Temporal Proximity to Christmas. Said law dictates that no Christmas decorations shall be put up and no Christmas music shall be played before Thanksgiving dinner. It’s purpose is to help ensure that the festivity and (desirable) accoutrements of the season are savored rather than ridden into the ground like a tired old mule (as the commercial powers that be in our world are wont to do).

But for you, dear friends and Divi enthusiasts the world over, I am breaking my law. I’m going to show you 3 simple ways to decorate your Divi website for the holidays with some animated falling snow.

Watch the Video Tutorial

Written Instructions

Method #1: Set it and forget it with the Snow Storm plugin.

The Tribulant Snow Storm plugin makes it about as easy as it could possibly be to add animated snowfall to your site. Simply install the plugin, activate it, and you’ve got snow.

The one drawback with this plugin is that when the body of your site loses focus, the snow simply stops in place. So if you click away from the browser window, you’ll get a bunch of dots all over your screen rather than a smooth falling snow animation. In my experience with the myholidayecards.com sample site, this behavior also occurs when the user clicks on iframe content, like embedded YouTube videos.

These behaviors might not be an issue for you, in which case the Snow Storm plugin may be a great fit. Although I love the Snow Storm plugin and have used it for quite some time, I wanted to find an alternative.



Method #2: Use a background video with the Bgvideo plugin.

I have a 3-part tutorial devoted to using the Bgvideo plugin from Pommiegranit for creating full screen background video that stays fixed behind your content (which makes for an interesting parallax scrolling effect):

You can leverage this technique to easily add animated snow to your web site. How I’ve done it:

  1. Download the plugin ZIP file from Pommiegranit’s GitHub repository and install it on your WordPress site.
  2. I created a looping snow animation in PowerPoint®, and then recorded the full screen animation to an MP4 with a screen capture tool (I’m actually partial to Movavi Screen Capture Pro because it yields a higher frame rate than other tools I’ve used — even Camtasia). You can grab an animated snowfall PowerPoint template for free at my PowerPoint Snow page. And there’s always the option of just finding a stock video that works with your design.
  3. Upload your snowfall MP4 and link to it using the bgvideo shortcode in any module that handles text:
    [bgvideo mp4="your-video-url.mp4" width="1280" height="720"]
  4. Voila! Your video will automatically loop in the background behind your content and span the height and width of your browser viewport. When you consider how many different effects you can achieve with a video, this becomes a pretty powerful technique.


Method #3: Use Particles.js

This one’s my favorite, but it requires a little more technical legwork than the previous two methodologies. Have no fear, though — easy-to-follow directions and working code samples are provided:

  1. Go to the Particles.js website, and notice the configuration widget on the right:
    Click the drop-down menu on the top-left of the configuration widget, and you’ll notice there’s a preset for snow.

    Choose that, and then you can customize the look and feel of the snow using the configurator. Once finished, you can download your custom configuration as a JSON file that can be used in concert with particles.js on your site.

    Custom implementations of particle animations have never been so easy!
  2. Once you’ve downloaded your custom particlesjs-config.json file, you’ll also need to download the Particles.js package, grab the particles.min.js file, and upload that along with your JSON file to the root directory of your Divi child theme using either cPanel or an FTP client.
  3. Next, create a new file in the same directory within your child theme, name it snowfall.js, paste the following script into the file, and save it:
    jQuery(function($) {
    
    	var templateUrl = object_name.templateUrl;
    	
    	$('body').attr('id', 'particles-js');
    
    	jQuery.cachedScript = function( url, options ) {
    	
    	// Allow user to set any option except for dataType, cache, and url
    	options = $.extend( options || {}, {
    		dataType: "script",
    		cache: true,
    		url: url
    	});
    	
    		// Use $.ajax() since it is more flexible than $.getScript
    		// Return the jqXHR object so we can chain callbacks
    		return jQuery.ajax( options );
    	};
    
    	// Usage
    	jQuery.cachedScript( '' + templateUrl + '/particles.min.js' ).done(function( script, textStatus ) {
    		console.log( textStatus );
    
    		particlesJS.load('particles-js', '' + templateUrl + '/particlesjs-config.json', function() {
    			console.log('callback - particles.js config loaded');
    		});
    
    	});
    
    });

    In essence, this script sets the templateUrl variable to the path of your child theme directory (we have to enqueue it a special way in order to make that work — more on that below), adds an id of “particles-js” to the body tag of your site, and initializes the particles.min.js script using the custom configurations found in your particlesjs-config.json file.

  4. Next, open the functions.php file in your child theme, add the following, and save it:
    wp_enqueue_script( 'particle-snow-script', get_stylesheet_directory_uri() . '/snowfall.js', array('jquery'), null, true );
    $translation_array = array( 'templateUrl', get_stylesheet_directory_uri() );
    wp_localize_script( 'particle-snow-script', 'object_name', $translation_array );

    This will enqueue the snowfall.js file in such a way that it is 1) dependent on jQuery, which is what we want, and 2) aware of your child themes directory path.

  5. Finally, open the style.css file in your child theme and add the following CSS declaration:
    .particles-js-canvas-el {
    	position: fixed;
    	top: 0;
    	left: 0;
    }

    The ParticlesJS script will dynamically add a canvas element with a class of particles-js-canvas-el to render the animation, so you want to make sure that element is behind your content and in a fixed position so everything floats above it when scrolling.

  6. Hit refresh on your site, and ta-da! You just added snow to your site with Particles.js! Congrats!