¿Cómo puedo crear una animación de desplazamiento de texto con solo HTML y CSS (o Java, supongo) como la manzana solía tener en su página de inicio?

Question

Tengo una pancarta en la parte superior de mi sitio web que es azul con un ligero degradado radial en el lado izquierdo.

Quiero tener texto blanco animado que se desplaza hacia arriba en el lado derecho de la pancarta. Quiero que se desvanezca como aparece y luego desaparezca. Me gustaría hacer esto sin el uso de Flash, y con la menor cantidad de Java posible. Puedo abrirme paso a través de CSS y configurar el diseño, pero no sé cómo codificarlo para que la animación funcione.

También me gustaría que el texto en blanco sean los títulos y un resumen muy breve de las publicaciones de blog recientes para el sitio. (probablemente el resumen de RSS) No sé si es fácil codificarlo o si tendré que codificarlo manualmente cada vez que tenga una nueva publicación de blog.

Después de algunas investigaciones básicas, creo que lo que estoy buscando es un lienzo HTML 5, pero no estoy seguro.

Answer 1

Actualización: 21/10/2015: La siguiente respuesta requirió que proporcionara explícitamente valores como 100em para lograr compensaciones. Esto no es ideal En cambio, you can translate the element.

actualización

Usted puede hacer esto de hecho hoy sin flash o JavaScript. Puede usar la función keyframes en los navegadores modernos para mover texto en los navegadores modernos. Me tomé la libertad de trabajar en una demostración rápida que demostraba el concepto: (horizontal) http://jsfiddle.net/jonathansampson/XxUXD/, y (vertical) http://jsfiddle.net/jonathansampson/h7SYp/.

Esencialmente establecemos el punto inicial de la animación en text-indent: 100% para que quede fuera de la vista y hacia la derecha. Luego establecemos el último cuadro en text-indent: -100%, o lo que sea necesario para ocultar el texto (variará dependiendo de la longitud del carácter).

respuesta Antiguo

Usted no será capaz de hacer esto sin flash o Javascript. HTML es estructura, mientras que CSS es presentación. Ninguno de los dos proporciona capacidades de animación. Sugiero que vayas por una ruta que incluya un pequeño marco de JavaScript como jQuery, ya que esto puede convertir HTML estándar en el efecto animado que deseas.

Lo animo a que busque en el Cycle Plugin para jQuery.

Answer 2

Sin duda necesitará usar JavaScript, a menos que quiera usar Flash. No puedes hacerlo sin un programa.

Su mejor opción es buscar en una biblioteca de animación.

Scriptaculous puede hacer todo lo que describe, pero hacer lo que usted describe no es para un principiante de JavaScript.

Answer 3

Lo que necesita es JavaScript en lugar de flash o java.

JQuery es ideal para este tipo de animación. Es una biblioteca de JavaScript que simplifica la escritura de funciones de JavaScript.Hay muchos complementos disponibles para jQuery que brindan una funcionalidad similar a la que necesita: eche un vistazo a JQuery Marquee