User Tools

Site Tools


phplugins_snowstorm

Snowstorm

A fun effect for winter, you can use Javascript to create snowfall on your website.

Head on over to the Snowstorm JS website to download the latest version of the Snowstorm script.

Unzip the downloaded package, then upload the snowstorm-min.js file to the /phplugins/js folder; if the folder doesn't yet exist, then create it.

Next, we call the script into our page using the ttg_body_bottom hook.

The example function below will call the script on CE4 Auto Index, CE4 Pages (excluding the Home page), and CE4 Theme for WordPress, so that it won't interfere with gallery performance. Excluding the script from the Home page assumes that you will be running a gallery there, but feel free to remove the exclusion if that's not the case, or if the gallery is small enough that the performance hit doesn't concern you.

// SNOWSTORM
function ttg_body_bottom( $style, $path ) {
	if (
		G_STYLE == 'CE4-AUTOINDEX' || 
		(preg_match('/^CE4-PAGES-(.*)$/', G_STYLE) && G_STYLE != 'CE4-PAGES-HOME' ) || 
		G_STYLE == 'CE4-WORDPRESS'
	) {

		echo '
<script src="/phplugins/js/snowstorm-min.js"></script>
<script>

	snowStorm.snowCharacter = "•";
	snowStorm.snowColor = "#ffffff";

</script>
		';

	}
} // END

If your website uses a white background, then you'll probably want to change the color of the snow so that it can be seen. Try #99ccff to make the snow a light shade of blue.

Snowstorm can eat up a lot of CPU, even on modern computers, because of the number of elements being moved around the screen at once. Consider raising the animation interval, and lowering the amount of snowflakes (active and max) to help reduce CPU use, if necessary. Where supported, Snowstorm will attempt to use GPU-based hardware acceleration to draw and animate the snow. Having GPU acceleration can help in reducing CPU load.

Also, the script will exclude mobile by default, preventing mobile devices from taking the performance hit. See documentation on the Snowstorm JS website if you'd like to enable mobile support, or adjust other script options.

phplugins_snowstorm.txt · Last modified: 2014/12/17 05:21 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.