Cómo crear un teletipo de noticias simple

Para hacer esto, seleccionamos todos los hijos de nuestro selector en caché y usamos el método de filtro jQuery para descartar todos los elementos. Luego, para cada restante<dt>, creamos un nuevo contenedor <div> y agregamos tanto el <dt> como el <dd> al nuevo contenedor. . Primero tenemos que agregar el <dd> que sigue al <dt> actual, porque una vez que el <dt>  se ha agregado al contenedor, no tendrá un <dd> después. Por lo tanto, necesitamos usar el método anteponer en el <dt> una vez que se haya agregado el<dd>.

Una vez que todos los pares <dt> y <dd> se han envuelto en elementos <div>, cambiamos la propiedad CSS de desbordamiento del ticker a oculta para eliminar la barra de desplazamiento. Esto es parte de la estrategia de accesibilidad y garantiza que solo los visitantes con JavaScript habilitado puedan ver el ticker mejorado.

A continuación, definimos nuestra función de animador, que es donde estableceremos la animación que hace que el ticker comience a desplazarse y luego siga desplazándose indefinidamente. Esta es una función JavaScript normal que acepta un solo parámetro; cuando llamamos a esta función, pasaremos el primer elemento contenedor dentro del ticker.

Lo primero que hacemos dentro de esta función es calcular la distancia que debe recorrer el elemento seleccionado y la duración de la animación. La parte de la distancia es fácil; es solo la altura del elemento contenedor actual. La duración es un poco más compleja; es la distancia total a recorrer menos la distancia ya recorrida, dividida por una velocidad de referencia que he establecido arbitrariamente en 0,025. La altura ya será un número entero, pero el método css devolverá una cadena que representa el margen superior del elemento que se está animando, por lo que debemos usar la función parseInt () de JavaScript para convertirlo en un número.  También será un número negativo, por lo que usamos la función de JavaScript Math.abs () para convertirlo de un número negativo a uno absoluto (positivo).

En mi opinión, la velocidad de referencia por la que dividimos la distancia restante para viajar es bastante lenta; He visto tickers antes (construidos con Java) y han tenido aproximadamente la misma velocidad y no me mareo por movimiento ni sufrí efectos nocivos. Si crees que la animación es demasiado rápida (o incluso demasiado lenta), no dudes en cambiar esta cifra. Sin embargo, debe ser un número muy pequeño; cualquier cosa en el rango de 0.01 a 0.09 probablemente estará bien.

Una vez que tengamos estas figuras, podemos crear la animación usando el método animado de jQuery. El primer parámetro de este método es la propia animación; queremos que el primero de los elementos del contenedor en el ticker se mueva hacia arriba hasta que esté completamente oculto en el desbordamiento, pero también queremos arrastrar el resto de los elementos del contenedor hacia arriba en la misma distancia, así que usamos ajustar el margen el elemento.

El segundo argumento del método animado es la duración que calculamos hace un momento. El tercer argumento es el método de relajación; Las animaciones jQuery personalizadas obtienen automáticamente dos tipos de suavizado: swing y lineal.  El swing hace que la animación se acelere y desacelere, mientras que el lineal lo hace suave y continuo, por lo que esta es la opción para nosotros en esta situación.

El argumento final es una función de devolución de llamada anónima que se ejecutará cuando finalice la animación. Dentro de esta función, movemos el elemento que se acaba de animar al final del conjunto de contenedores, restablecemos su marginTop de nuevo a 0, y luego llamamos de forma recursiva a la función animador nuevamente, pasando el nuevo primer hijo del ticker.

Finalmente, necesitamos llamar a la función animador una vez para comenzar todo el proceso. Cuando vemos esta página en un navegador, el ticker debe desplazarse suavemente por cada uno de los elementos de la lista repetidamente:

Iniciar y detener

Ahora tenemos que pensar en lo que queremos que suceda cuando un visitante pasa el ratón por encima de una noticia; personalmente, creo que el comportamiento predeterminado debería ser que se pausa al pasar el mouse y luego se reinicia nuevamente cuando se saca el mouse. Podemos agregar fácilmente este comportamiento con un par de controladores de eventos jQuery; agrega el siguiente código justo antes del combo final de llaves / llaves:

1

//set mouseenter

2

ticker.mouseenter(function() {

3

4

  //stop current animation

5

  ticker.children().stop();

6

7

});

8

9

//set mouseleave

10

ticker.mouseleave(function() {

11

12

  //resume animation

13

  animator(ticker.children(":first"));

14

});

Ambas funciones son realmente simples; usamos mouseenter y mouseleave en lugar de mouseover y mouseout porque hace que estas funciones sean agradables y pequeñas; no tenemos que preocuparnos por ignorar las salidas del mouse cuando el puntero se mueve desde el elemento exterior del ticker a uno de los elementos secundarios.  En la función mouseenter simplemente detenemos la animación. En la función mouseleave, simplemente reiniciamos la animación una vez más, pasando el primer hijo del ticker.

Reparando IE

Nos queda un problema por resolver y, afortunadamente, es fácil. Ejecutar la página como está en IE (probado en la versión 8) arroja un error tan pronto como se carga.  El error se debe a que la primera vez que la función animador ejecuta el primer contenedor <div> tendrá su margin-top establecido en auto por el navegador.  Otros navegadores interpretarán el margen superior como 0. Qué navegador es correcto es discutible, aunque te dejaré sacar tu propia conclusión sobre el hecho de que IE es el único navegador que causa el problema.  Todo lo que tenemos que hacer para solucionarlo es establecer explícitamente el margen superior de los elementos del contenedor. Podemos hacer esto agregando la siguiente línea de código a la hoja de estilo:

1

#ticker div { margin-top:0; }

Ahora la página también debería funcionar en IE:

Resumen

Ahora, esto nos lleva al final del tutorial, ahora deberíamos tener un ticker de noticias simple pero efectivo que se puede usar de varias maneras. Al usar texto, como en este ejemplo, definir los encabezados y las secciones de contenido asociadas dentro de una lista de definiciones tiene sentido desde una perspectiva semántica, y es fácil agregar cualquier elemento adicional que podamos necesitar a medida que avanzamos.

• Síguenos en Twitter o suscríbate a la fuente RSS de Nettuts + para obtener más información y artículos sobre desarrollo web diarios.