Vertical auto scroll ticker con jQuery

Name: Vertical auto scroll ticker con jQuery
Brand: Jose Aguilar
SKU: joseaguilarblog-5975
Availability: InStock
Rating: 5 (4 reviews)

En este artículo vamos a ver como crear una columna con contenido auto scrollable utilizando un plugin jQuery llamado «totemticker».

Es muy sencillo de utilizar y además dar el formato deseado es tan sencillo como maquetar unas listas desordenadas con las etiquetas ul,li.

En el ejemplo que vamos a ilustrar vamos a tener una página Web con una columna izquierda donde se visualizará el contenido auto scrollable que podrían representar noticias, artículos, productos, posts, etc.

El contenido que se visualiza en la columna izquierda de la imagen tiene un auto scroll dinámico que se mueve cada x segundos.

Para añadir este efecto en tu página Web tan solo tienes que añadir en la cabecera de tu página la librería jQuery y la llamada al plugin:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/jquery.totemticker.js"></script>
<script type="text/javascript">
$(function(){
    $('#vertical-ticker').totemticker({
        row_height    :    '100px',
        next        :    '#ticker-next',
        previous    :    '#ticker-previous',
        stop        :    '#stop',
        start        :    '#start',
        mousestop    :    true,
    });
});
</script>

El plugin tiene los siguientes parámetros de configuración:

message     :    'Ticker Loaded',    /* Disregard */
next        :    null,       /* ID of next button or link */
previous    :    null,       /* ID of previous button or link */
stop        :    null,       /* ID of stop button or link */
start       :    null,       /* ID of start button or link */
row_height  :    '100px',    /* Height of each ticker row in PX. Should be uniform. */
speed       :    800,        /* Speed of transition animation in milliseconds */
interval    :    4000,       /* Time between change in milliseconds */
max_items   :     null,      /* Integer for how many items to display at once. Resizes height accordingly (OPTIONAL) */

En el <body> allí donde deseemos tan solo tenemos que añadir una lista de elementos como por ejemplo:

<ul id="vertical-ticker">
   <li>Titular 1</li>
   <li>Titular 2</li>
   <li>Titular 3</li>
   ...
</ul>

Y ahora tan solo te faltaría añadir un poco de estilos:

#vertical-ticker {
    height:390px;
    overflow:hidden;
    margin:0; 
    padding:0;
}

#vertical-ticker li {
    padding:5px 20px;
    display:block;
    background:#efefef;
    color:#333;
    border-bottom:1px solid #ddd;
    text-align:center;
}

Ver el ejemplo en funcionamiento