Merry Xmas

It’s been a while since my last post – my excuse is a complete lack of time, due to high workload. Anyway, just in time for Xmas, I have managed to find some spare time to write a Mootools class that simulates a snowfall.
The class is pretty simple, yet there are many options to play with. Although the title suggests that the snow is comprised of text symbols, you can also use HTML and therefore images, for snowflakes.
Anyway, if this is something that you may be interested in using for the holiday season, here is how you would do it:

<script type="text/javascript" src="js/mootools.v1.11.js"></script>
<script type="text/javascript" src="js/mootools.tsnow.js"></script>

<script type="text/javascript">
//<![CDATA[
var Site = {

	start: function(){
		//basic usage, assumes that div#snow dimensions have been explicitly specified
		//div#snow is the container for the snowfall, needs to be created by hand
		new TextSnow({ container:$('snow') });

		//extended usage, all options are used
		new TextSnow({
			container:$('snow'),//container where you want the snowfall
			inject:'top',//insert stage inside, top, before or after the container

			stage:{
				//any number of css rules
				styles:{
					background:'#ccc',
					width: 100,
					height: 100
				},
				padding: 1//horisontal stage padding
			},

			snow:{
				ammount: 30,//number of snowflakes
				speed:[1,2,3],//speed with wich individual snowflakes fall

				//any number of css rules
				styles: {
					'position': 'absolute'
				},

				symbol: ['*', '.', '<img src="img-url" />', '&raquo;'],//an array of flake symbols, html can be used as well
				color:['#fff','#eee','#eed'],//flake color
				fontFamily:['Impact', 'Times New Roman', 'Georgia'],//different flake shape
				fontSize:[20,22],//font size in pixels
				direction:'left',//left,right,straight
				sinkSpeed:50//how fast the snow is falling (lower number = higher speed)
			}
		});
	}
};

window.addEvent('domready', Site.start);
//]]>
</script>

<!-- CSS used for the example on my site -->
<style type="text/css">
	#snow{height: 500px; width: 750px; position: relative;}
	#snow img{position: absolute; top:0; left: 0;}
</style>

The script can be downloaded here. Oh and Merry Christmas & Happy New Year!


8 Responses to “Mootools Text Snow”

  • Hi!

    Great script!

    Had trouble on Firefox… would freeze on the page and could barely navigate to another tab.

    I solved this by not using the “inject” function.


    //

  • Not sure what you mean by inject function - maybe inject option? Even then, the script itself will execute injectTop by default.

  • Very creative. Thanks for commenting the text, it makes it a lot easier for someone like me (code illiterate) to understand whats going on with some of the functions.

  • Can’t…. get… it.. to.. work!

    copied everything (even using your URLs) and I still don’t get any freaking snow!
    No errors either in the JS console.

  • Well, I can’t really help you without seeing any code :) If you post the link to your creation, I may be able to help.

  • I have last firefox stable version and I see snow on your image but only on 1cm height top part of the image (not on the whole image). I’m running Linux.

  • I am running firefox 3.5.4 and the snow is immediately below the picture but not on the picture itself. On my linux system, the snow is also immediately below the picture.

  • Hi midci7, I’ve changed the styles on this site since the script was written. The script itself should function, the problem may be with the styles applied (or not applied) to the demo container. Although it seems to work on Firefox 3.5.4/WinXP, but Opera and Webkit display similar behavior to what you’ve described.

    If you need a quick fix, I believe that, setting fixed width and height to the container should solve the problem.

Leave a Reply


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>