Vertical auto scroll ticker con jQuery

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.

vertical scroll tickerEl 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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(4 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre