zion wrote:
> Hi,
>
> I just found this amazing looking technique that utilizes jquery
> library to produce this kind of effect:
> http://cliframework.com/
>
> Is there a nice way to produce this particle effect with prototype &
> scriptaculous?
Just a direct (not refactored) translation:
var Spark = Class.create({
initialize: function() {
var self = this;
this.b = './';
this.s = ['spark.png', 'spark2.png', 'spark3.png', 'spark4.png'];
this.i = this.s[this.random(this.s.length)];
this.f = this.b + this.i;
this.n = document.createElement('img');
this.newSpeed().newPoint().display().newPoint().fly();
},
display: function() {
this.n.src = this.f;
this.n.setStyle({
'position': 'absolute',
'z-index': this.random(20),
'top': this.pointY + 'px',
'left': this.pointX + 'px'
});
$(document.body).insert(this.n);
return this;
},
fly: function() {
var self = this;
this.n.morph({
top: this.pointY + "px",
left: this.pointX + "px"
}, {
duration: this.speed / 1000.0,
transition: Effect.Transitions.linear,
afterFinish: function () {
self.newSpeed().newPoint().fly();
}
});
},
newSpeed: function() {
this.speed = (this.random(10) + 5) * 1100;
return this;
},
newPoint: function() {
this.pointX = this.random(window.innerWidth - 100);
this.pointY = this.random(350);
return this;
},
'random': function(max) {
return Math.ceil(Math.random() * max) - 1;
}
});
document.observe("dom:loaded", function () {
var totalSparks = 40;
var sparks = [];
for (var i = 0; i < totalSparks; i++) {
sparks[i] = new Spark();
}
});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
