MooShell

• Run
• Edit

• Result
• JavaScript
• HTML
• CSS

window.addEvent('domready',function(){

    // constructed instances

    var tickerUp = new InfiniteTicker('ticker_up',{
        duration: 1000,
        transition: 'quad:out',
        direction: 'up'
    });
    
    var tickerDown = new InfiniteTicker('ticker_down',{
        duration: 1000,
        transition: 'bounce:out',
        direction: 'down'        
    });
    
    var tickerRight = new InfiniteTicker('ticker_right',{
        duration: 1000,
        transition: 'quad:out',
        direction: 'right',
        childSelector: 'div.inner > p'
    });
    
    var tickerLeft = new InfiniteTicker('ticker_left',{
        duration: 1000,
        transition: 'quad:out',
        direction: 'left',
        transition: 'elastic:out'
    });


    // events inherited from Fx
    
    tickerUp.addEvents({
        onStart: function(){
            $('onStart').highlight();
        },
        onComplete: function(){
            $('onComplete').highlight();
        }
    })

    // methods

    $('start').addEvent('click',function(){
        tickerUp.startLoop();
        tickerDown.startLoop();
        tickerRight.startLoop();
        tickerLeft.startLoop();
    });
    
    $('stop').addEvent('click',function(){
        tickerUp.stopLoop();
        tickerDown.stopLoop();
        tickerLeft.stopLoop();
        tickerRight.stopLoop();
    });
    
    $('next').addEvent('click',function(){
        tickerUp.progress();
        tickerDown.progress();
        tickerRight.progress();
        tickerLeft.progress();
    });
    
    $('reverse').addEvent('click',function(){
        tickerUp.reverse();
        tickerDown.reverse();
        tickerRight.reverse();
        tickerLeft.reverse();
    });
    
    $('show_scrollbars').addEvent('click',function(){
        if(this.get('text') == 'show scrollbars'){
            $$('.ticker').setStyle('overflow','auto');
            this.set('text','hide scrollbars');
        } else {
            $$('.ticker').setStyle('overflow','hidden');
            this.set('text','show scrollbars');
        }
    })
    
});

<ul class="ticker" id="ticker_up">
    <li class="red">1</li>
    <li class="green">2</li>
    <li class="blue">3</li>
    <li class="red">4</li>
    <li class="green">5</li>
    <li class="blue">6</li>
</ul>

<div class="ticker" id="ticker_down">
    <p class="red">1</p>
    <p class="green">2</p>
    <p class="blue">3</p>
    <p class="red">4</p>
    <p class="green">5</p>
    <p class="blue">6</p>
</div>


<div class="ticker horizontal" id="ticker_right">
    <div class="inner">
        <p class="red">1</p>
        <p class="green">2</p>
        <p class="blue">3</p>
        <p class="red">4</p>
        <p class="green">5</p>
        <p class="blue">6</p>
    </div>
</div>

<div class="ticker horizontal" id="ticker_left">
    <div class="inner">
        <p class="red">1</p>
        <p class="green">2</p>
        <p class="blue">3</p>
        <p class="red">4</p>
        <p class="green">5</p>
        <p class="blue">6</p>
    </div>
</div>

<h2>Events (inherited from Fx)</h2>
<p>
    <span id="onStart">onStart</span>
    <span id="onComplete">onComplete</span>
</p>

<h2>Methods</h2>

<p>
    <button id="start">start</button>
    <button id="stop">stop</button> &nbsp; &nbsp;
    <button id="reverse">reverse</button>
    <button id="next">next</button> &nbsp; &nbsp;
    <button id="show_scrollbars">show scrollbars</button>
</p>

.ticker {
    overflow: hidden;
    height: 100px;
    width: 207px;
    float: left;
    margin: 10px;
    padding: 0;
}

div.ticker p, ul.ticker li {
    height: 50px;
    padding: 0px;
    margin: 0px;
    font-size: 25px;
    line-height: 50px;
    color: #fff;
    margin: 0px;
    text-align: center;
}

div.horizontal {
    clear: both;
    float: none;
    width: 435px;
    height: 50px;
}

div.horizontal div.inner {
    width: 870px;
}

div.horizontal div.inner p {
    float: left;
    width: 145px;
}

body {
    font-family: Helvetica, arial;
    background: #fff;
}


h2 {
    color: #43aa38;
    margin: 10px;
}

p {
    margin-left: 10px;
}

.red {
    background: #e40053;
}

.blue {
    background: #0094d5;
}

.green {
    background: #43aa38;
}