there is what I've done, but I'm not satisfied. First, I cannot figure how to repeat the loop when arrived at the end of the <ul> (I've tryied differents way but none works at 100%). Secondarily, I cannot precisely control speed at the end of the accelerating/decelerating transition. (Or i dunno how to do it). This bring some incoherencies between the speeds in the accelerating and the linear phases.
Thanks for any tip/suggestion you would like to tell me. Oh, well, to start animation in mooshell just mousenter/leave the ticker; and sorry for my english
Here's the code.
- window.addEvent('domready',function(){
- var total=0;
- var ss=0;
- var speed=0.05;
- var wrap=$('wrap');
- var c=$('ppp');
- $$('li').each(function(el){
- total+=el.getSize().x;
- });
- d=(total-ss)/speed;
- alert(d);
- $('in').setStyle('width',total+'px');
- var myFx1;
- var myFx2 = new Fx.Scroll(wrap, {
- wait:false,
- duration: 50/speed,
- transition: Fx.Transitions.Quad.easeOut}
- );
- var myFx3 = new Fx.Scroll(wrap, {
- wait:false,
- duration: 50/speed,
- transition: Fx.Transitions.Quad.easeIn,
- onComplete:function(){
- d=(total-ss)/speed;
- myFx1 = new Fx.Scroll(wrap, {
- wait:false,
- duration: d,
- transition: 'linear',
- /*onComplete:function(){
- ss=0;
- this.set(0,0);
- this.toRight();}
- */
- }).toRight();
- }
- });
- $('wrap').addEvent('mouseover',function(event){
- event = new Event(event).stop();
- myFx1.cancel();
- ss=wrap.getScroll().x;
- c.set('html',ss);
- myFx2.start(ss+50, 0);
- });
- $('wrap').addEvent('mouseleave',function(event){
- myFx2.cancel();
- ss=wrap.getScroll().x;
- c.set('html',ss);
- myFx3.start(ss+50,0);
- });
- });
