Fantastic News Ticker - Excelente recurso para implementar un ticker de noticias con Mootools

En Woork publican Fantastic News Ticker que se trata de un excelente recurso que nos permitirá implementar un ticker de notcias con Mootools.

Es muy elegante y el funcionamiento del ejemplo es basado en el de Newsvine, este está disponible para descargar.

También es muy fácil de implementar, sólo son necesarios 4 pasos:

Contenido

1 Paso 1 – Estructura del HTML
2 Paso 2 – El código HTML
3 Paso 3 – El código CSS
4 Paso 4 – La función Javascript que habilita el desplazamiento (scroller) vertical
- 4.1 Sitio: Woork (en inglés)
- 4.2 Descargar ejemplo/ver demo de Fantastic News Ticker visita Woork

Paso 1 – Estructura del HTML

Cada noticia está contenida en un <li> y la lista <ul>es contenido dentro de la capa (layer) #NewsVertical con la propiedad overflow puesta a hidden (oculta) y la position en relative (relativa).

Paso 2 – El código HTML

Enlazar el archivo Javascript de Mootools:

Luego, agregar el siguiente código al <body>:

<div id=“NewsTicker”>
<h1>What’s news?</h1>
<div id=“NewsVertical”>
<ul id=“TickerVertical”>
<!– Each News into a LI element
Use PHP or another language
to get dinamically your news. –>
<li>
<img src=“img/img1.png” border=“0” class=“NewsImg”/>
<span class=“NewsTitle”>
<a href=“link.html”>News Title</a>
</span>
Some text here, it’s your news summary…
<span class=“NewsFooter”><strong>Published July 25</strong> – 324 comments</span>
</li>
<!– If you can’t use a server side
language to get your news add
manually your news into LI element
–>
</ul>
</div>
</div>

En este ejemplo es una página estática, lo interesante obviamente es hacerlo dinámico, por lo que conocimientos de algún lenguaje como PHP son necesarios.

Paso 3 – El código CSS

El siguiente es el código de la CSS usado en este ejemplo.

#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:344px;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width:300px;
height:300px;
display:block;
overflow:hidden;
position:relative;
}
/* ————— */
/* Ticker Vertical */
#TickerVertical {
width:300px;
height:300px;
display:block;
list-style:none;
margin:0;
padding:0;
}
#TickerVertical li {
display:block;
width:288px;
color:#333333;
text-align:left;
font-size:11px;
margin:0;
padding:6px;
float:left;
}
#TickerVertical li .NewsTitle{
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display:block;
color:#000000;
font-size:10px;
margin:6px 0 14px 0;
}