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
- Mootools Slide Effect: expand all, collapse all or use as accordion
- Unobtrusive AJAX with CodeIgniter and Mootools
- Live search with CodeIgniter and Mootools
- Mootools text drop-shadow
- codeigniter
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.