Как создать анимацию прокрутки текста только с помощью HTML и CSS (или, я полагаю, java), как это было у яблока на их живой странице?

Question

У меня есть баннер в верхней части моего сайта, синий с легким радиальным градиентом с левой стороны.

Я хочу, чтобы белый текст анимировался с правой стороны баннера. Я хочу, чтобы он постепенно появлялся, а потом исчезал. Я хотел бы сделать это без использования Flash и как можно меньше Java. Я могу пройти через CSS и настроить макет, но я не знаю, как его кодировать, чтобы анимация работала.

Мне также хотелось бы, чтобы белым текстом были заголовки и очень краткое резюме последних сообщений в блоге для сайта. (возможно, резюме в формате RSS). Я не знаю, легко ли в него написать код или мне нужно будет передавать код каждый раз, когда у меня появляется новое сообщение в блоге.

После некоторых фундаментальных исследований я думаю, что мне нужен HTML 5 canvas, но я не уверен.

Answer 1

Обновление: 21.10.2015: Следующий ответ требовал от вас явного указания значений, таких как 100em, для достижения смещений. Это не идеально. Вместо можно перевести элемент .

Обновление

Вы действительно можете сделать это сегодня без flash или JavaScript. Вы можете использовать функцию keyframes в современных браузерах для перемещения текста в современных браузерах. Я взял на себя смелость создать короткую демонстрацию, демонстрирующую концепцию: (горизонтальная) http://jsfiddle.net/jonathansampson/XxUXD/, и (вертикальная) http://jsfiddle.net/jonathansampson/h7SYp/.

По сути, мы устанавливаем начальную точку анимации на text-indent: 100%, чтобы вывести ее из поля зрения и вправо. Затем мы устанавливаем последний кадр на text-indent: -100%, или все, что нужно, чтобы скрыть текст (зависит от длины символа).

Старый ответ

Вы не сможете сделать это без flash или Javascript. HTML это структура, а CSS это презентация. Ни один из двух не предоставляет возможности анимации. Я бы посоветовал вам пойти по пути, который включает в себя небольшую инфраструктуру javascript, такую ​​как jQuery, так как это может преобразовать стандартный HTML в желаемый вами анимированный эффект.

Я бы посоветовал вам заглянуть в Cycle Plugin для jQuery.

Answer 2

Вам нужен JavaScript, а не flash или java.

JQuery идеально подходит для этого типа анимации. Это библиотека JavaScript, которая упрощает написание таких функций JavaScript. Для jQuery доступно множество плагинов, которые предоставляют функциональность, аналогичную той, которая вам требуется - посмотрите на JQuery Marquee

Answer 3

Вам обязательно нужно будет использовать JavaScript, если вы не хотите использовать Flash. Вы не можете сделать это без программы.

Лучше всего заглянуть в библиотеку анимации.

Scriptaculous может делать все, что вы описываете, но делать то, что вы описываете, не для начинающих JavaScript.