Add Falling Snow Effect in Divi

|

Give your Divi theme a festive feel this holiday with a subtle falling snow effect. Here's how to add falling snow to any Divi section, row or module. Like this:

We wish you a merry Christmas

We wish you a merry Christmas

We wish you a merry Christmas and a happy new year

Good tidings we bring to you and your kin

We wish you a merry Christmas and a happy new year

To achieve this, first add the following PHP code to your site. It's reasonably long, but don't worry – you shouldn't have to modify it in any way:

// PHP: Hook to add the falling snow effect to sections with the 'falling-snow' class
if ( ! function_exists( 'divibooster_add_falling_snow_to_section' ) ) {

	function divibooster_add_falling_snow_to_section( $output, $render_slug, $module ) {
		
		if ( is_string( $output ) && isset( $module->props['module_class'] ) && in_array( 'falling-snow', explode( ' ', $module->props['module_class'] ) ) ) {

			// Inject a container to hold the falling snow effect that will be managed by JavaScript
			$snow_container = '<div class="falling-snow-container"></div>';

			// Insert our falling snow container HTML just inside the main element
			$output = preg_replace( '/^(<div [^>]*>)/', '$1' . $snow_container, $output, 1 );
		}

		return $output;
	}

	add_filter( 'et_module_shortcode_output', 'divibooster_add_falling_snow_to_section', 10, 3 );

}

// CSS: Basic styles for the falling snow container and snowflakes
if (!function_exists('divibooster_falling_snow_css')) {
function divibooster_falling_snow_css() {
	?>
	<style>
		.falling-snow-container {
			position: absolute; 
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden; 
			pointer-events: none; 
		}

		.snowflake {
			position: absolute;
			top: -10px;
			color: #fff;
			opacity: 0.8;
			font-size: 1em; /* Adjust size as needed */
			will-change: transform; /* For better performance */
			pointer-events: none; /* Disables events on the snowflakes themselves */
		}
		@keyframes fall-left {
			from { transform: translateY(0) rotateY(0deg); }
			to { transform: translateY(100vh) rotateY(360deg); }
		}		
		@keyframes fall-right {
			from { transform: translateY(0) rotateY(0deg); }
			to { transform: translateY(100vh) rotateY(-300deg); }
		}
	</style>
	<?php
}

add_action( 'wp_head', 'divibooster_falling_snow_css' );
}

if (!function_exists('divibooster_falling_snow_js')) {
function divibooster_falling_snow_js() {
	?>
	<script>
(function() {
	var snowContainers = document.querySelectorAll('.falling-snow-container');
	if (snowContainers.length === 0) {
		return; // Exit if there are no containers
	}

	// Function to create a single snowflake and animate its fall and rotation
	function createSnowflake(container) {
		var snowflake = document.createElement('div');
		snowflake.className = 'snowflake';
		snowflake.innerHTML = '❄'; // Unicode snowflake character
		var snowflakeStyle = snowflake.style;
		snowflakeStyle.left = (Math.random() * 100) + '%';

		/*snowContainer.appendChild(snowflake);*/
		container.appendChild(snowflake);

		// Randomize various style properties
		snowflakeStyle.opacity = Math.random();
		snowflakeStyle.fontSize = (Math.random() * 0.5 + 0.5) + 'em'; 
		
		// Set random duration and rotation speeds for animations
		var fallDuration = (Math.random() * 5 + 5) + 's';
		var spinDirection = Math.random() < 0.5 ? 'left' : 'right';
		snowflakeStyle.animation = 'fall-' + spinDirection + ' ' + fallDuration + ' linear infinite';

		// Remove the snowflake after it has fallen
		setTimeout(() => {
			snowflake.remove();
		}, parseFloat(fallDuration) * 1000); // Convert duration string to milliseconds
	}

	// Create new snowflakes at 300ms intervals inside each container
	snowContainers.forEach(function(container) {
		setInterval(function() {
			createSnowflake(container);
		}, 300);
	});
})();
	</script>
	<?php
}

add_action( 'wp_footer', 'divibooster_falling_snow_js', 100 );
}
Now, on any section, row or module that you want to add falling snow to, just give it a CSS Class of "falling-snow", like so:

2 Comments

  1. I have tried this on 2 website and it will not save and update the page after completion.

    Reply
    • Hey John, sorry to hear it's not working for you. Is there any chance you're able to send through an example of one of the pages you tried it on, so that I can look in to it for you? Thanks!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.