Animating background-position property

[almeidap]

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-animations-in-scriptaculous/

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/thread/6d49c600a9d35c51/

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

[almeidap]

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/...

[almeidap]

For the people who may be interested, the plugin has been updated for more efficiency!

It has also been renamed to BGEffects and is now located at
http://www.almeida.ch/projects/BGEffects/.
The BGEffects library is also available for jQuery and script.aculo.us.

I hope that scripty2 development will continue as it is really a great animation library!

Have fun!

Pedro De Almeida