DEC 19
Mootools Text Snow
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" />', '»'],//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!
Categories
Search
Popular posts
- Live search with CodeIgniter and Mootools
- Mootools Slide Effect: expand all, collapse all or use as accordion
- CodeIgniter custom URI routing
- Mootools Text Snow
- CodeIgniter model productivity methods
santa says:
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.
//
Alex says:
Not sure what you mean by inject function - maybe inject option? Even then, the script itself will execute injectTop by default.
apple pie recipe says:
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.
mathieu says:
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.
Alex says:
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.
Spir says:
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.
midci7 says:
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.
Alex says:
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.