|
|
//script requires prototypejs.org
if (Object.isUndefined(TMC) || !TMC) { var TMC = {}; }
if (Object.isUndefined(TMC.widget) || !TMC.widget) { TMC.widget = {}; }
TMC.widget.Snow = Class.create({
initialize: function(options) {
this.options = {
flakes: 35, // number of snowflakes (more than 30 - 40 not recommended)
color: ['#aaaacc','#ddddFF','#ccccDD'], // colors for the snow. Add as many colors as you like
font: ['Arial Black','Arial Narrow','Times','Comic Sans MS'], // fonts that create the snowflakes. Add as many fonts as you like
text: '*', // letter that creates your snowflake (recommended:*)
speed: 0.6, // speed of sinking (recommended values range from 0.3 to 2)
size: { // minimum & maximun size of the snowflake
max: 22,
min: 8
}
};
Object.extend(this.options, options || {});
this.container = new Element('div');
this.elements = [];
for (var i = 0; i <= this.options.flakes; i++) {
this.elements[i] = new Element('span').update(this.options.text);
this.elements[i].size = (this.randomer((this.options.size.max - this.options.size.min)) + this.options.size.min)
Object.extend(this.elements[i],{
cords: 0,
across: (Math.random() * 15),
horizontal: (0.03 + Math.random()/10),
sink:(this.options.speed * this.elements[i].size / 5)
}).setStyle({
position: 'absolute',
top: this.options.size.max + 'px',
fontFamily: this.options.font[this.randomer(this.options.font.length)],
fontSize: this.elements[i].size,
color: this.options.color[this.randomer(this.options.color.length)]
});
this.container.appendChild(this.elements[i]);
}
document.observe('dom:loaded',this.onDomLoad.bindAsEventListener(this));
},
onDomLoad: function() {
var viewport = document.viewport.getDimensions();
(document.getElementsByTagName('body')[0]).appendChild(this.container);
this.elements.each(function(item){
Object.extend(item,{
posx: (this.randomer(viewport.width - item.size)),
posy: (this.randomer(2 * viewport.height - viewport.height - 2 * item.size))
}).setStyle({
left: item.posx + 'px',
top: item.posy + 'px'
});
}, this);
this.start();
},
move: function() {
var viewport = document.viewport.getDimensions();
this.elements.each(function(item){
item.cords += item.horizontal;
item.posy += item.sink;
item.setStyle({
top: item.posy + 'px',
left: (item.posx + item.across * Math.sin(item.cords)) + 'px'
});
if (item.posy >= viewport.height - 2 * item.size || parseInt(item.getStyle('left')) > (viewport.width - 3 * item.across)){
item.posx = this.randomer(viewport.width - item.size);
item.posy = 0;
}
}, this);
},
randomer: function(range) {
return Math.floor(range * Math.random());
},
start: function(){
this.timer = setInterval(this.move.bind(this), 50);
},
stop: function() {
clearInterval(this.timer);
this.timer = null;
},
hide: function() {
this.container.hide();
},
show: function() {
this.container.show();
}
});
|