jQuery Text Roulette

 

Esse post tem o intuito de mostrar como fazer de uma forma simples blocos de texto atuarem como uma roleta russa, ou seja, ficarem em ordem aleatória.

Para esse exemplo, criei um HTML com a seguinte estrutura:

<div id="roulette">
    <ul>
        <li>Texto aqui</li>
        <li>Texto aqui</li>
        <li>Texto aqui</li>
        <li>Texto aqui</li>
        <li>Texto aqui</li>
    </ul>
</div>

Você deve se atentar que a div com o id “roulette” deve possuir uma altura definida e também overflow:hidden, o resto fica a cargo do JavaScript, e aqui usei jQuery:

var roulette = $('#roulette'),
    nItems = roulette.find('li').length,
    lastPos = 0;

rotate = function () {
    var triggerID = Math.floor(Math.random() * nItems),
        rouletteHeight = $(roulette).find('li').outerHeight(true),
        roulettePosition = triggerID * rouletteHeight;
    if (roulettePosition != lastPos) {
        roulette.find('ul').stop().animate({
            top: -roulettePosition
        }, 500);
        lastPos = roulettePosition
    } else {
        rotate()
    }
};

setInterval(function(){
    rotate();
}, 3000);

Para melhor compreensão, vejam o exemplo em funcionamento. 

Você também pode efetuar o download do código aqui.

Créditos: cssnolanche

Tweet

Pin It