Hello,
I have updated my demo page with a "point of view"-enabled animation,
which is an extension of the perspective animation. It tracks mouse
position in order to change animation speed and/or reverse animation
direction.
Animating background of nested div's is achieved through the
'afterUpdate' callback of a dummy S2 morphing effect on a style
property, which produces no visual changes:
PerspectiveEffect = Class.create({
[...]
initialize : function(container, options){
[...]
this.effect = new S2.FX.Morph(this.container, {
style : 'bottom: 1', // Morphing a property which produces no
visual change!
duration : this.options.duration,
fps : 30,
after : this.options.loop ? this.loop.bind(this) : Prototype.K,
afterUpdate : this.render.bind(this)
});
[...]
}
});
This is clearly not efficient and I hope to release soon a native S2
effect through some patch or extension (this is why I need your
help! ;) ).
I wanted also to introduce some looping ability to the animation. It
couldn't find anything to force some effect to restart, therefore I
used the 'after' callback to replay animation:
loop : function(){
this.effect.cancel(false);
this.play.bind(this).delay(0); // Deferred command
},
As you can see, I have to cancel the effect and delay the play command
to ensure that effect will restart. Do you know some easier way to
achieve that? If you want to see looping in action, check this:
http://www.almeida.ch/
Thanks again!
Pedro De almeida
On 8 avr, 15:59, almeidap <almei...@gmail.com> wrote:
> Hi all,
> I am currently having fun with Scripty2 and particularly with
> background animations.
> It seems that S2 does not handle background-position morphing, like
> the old script.aculo.us library. Nevertheless, someone proposed a
> solution to add this ability to script.aculo.us:http://codeandeffect.co.uk/blog/2008/programming/js/background-animat...
> I would like to know if someone here tried to migrate his code to S2?
> If not, could you provide me some hints to know where to start from?
> I have tried to review S2 source code but it seems more complex than I
> expected as discussed here:http://groups.google.com/group/prototype-scriptaculous/browse_thread/...
> Meanwhile, I have been playing with alternatives to animate
> backgrounds and there is a demo page of my work:http://www.almeida.ch/projects/bgpos/
> My objective is to simulate a perspective animation using multiple
> backgrounds layers, through S2 morphing, CSS3 transitions or nested
> div's. Please, feel free to review my code!
> Thanks a lot!
> Pedro De Almeida
