То, как я создаю анимацию прокручивания текста только с HTML и CSS (или Java, который я предполагаю), как яблоко раньше имело на их livepage?
У меня есть баннер наверху моего веб-сайта, который является синим с легким радиальным градиентом на левой стороне.
Я хочу анимировать белый текст, который прокручивает на правой стороне баннера. Я хочу, чтобы это постепенно появилось, как это появляется, и затем отойдите назад. Я хотел бы сделать это без использования Flash и как можно меньше Java. Я могу проложить себе путь через CSS и настроить расположение, но я не знаю, как кодировать его так, чтобы анимация работала.
Я также хотел бы белый текст, будут заголовки и очень краткий обзор недавних сообщений в блоге для сайта. (вероятно, сводка RSS) я не знаю, легко ли это кодировать в нее или если я должен буду вручить код, что каждый раз у меня есть новое сообщение в блоге.
После некоторого фундаментального исследования я думаю, что я ищу, холст HTML 5, но я не уверен.
3 ответа
Обновление: 10/21/2015: В следующем ответе необходимо явно предоставить значения, такие как 100EM Для достижения смещений. Это не идеально. Вместо этого Вы можете перевести элемент .
Обновление
Вы действительно можете сделать это сегодня без Flash или JavaScript. Вы можете использовать функцию ключевых кадров в современных браузерах для перемещения текста в современных браузерах. Я взял на себя свободу разработать быструю демонстрацию, демонстрирующую концепцию: (горизонтальный) http://jsfiddle.net/jonathansampson/xxuxd/ и (вертикальный) http://jsfiddle.net / jonathansampson / h7syp / .
По сути, мы устанавливаем начальную начальную точку анимации в текстовый отклик : 100% , чтобы установить его из просмотра и справа. Затем мы устанавливаем последний кадр в текстовый отклик : -100% , или что-то нужно, чтобы скрыть текст (будет варьироваться в зависимости от длины символов).
Старый ответ
Вы не сможете сделать это без Flash или JavaScript. HTML является структурой, в то время как CSS является презентацией. Ни одно из двух не обеспечивает анимационные возможности. Я бы предложил вам пойти на маршрут, который включает в себя небольшую плату JavaScript, как jQuery, так как это может преобразовать стандартный HTML в анимированный эффект, который вы хотите.
То, что вам нужно, это JavaScript, а не Flash или Java.
jQuery идеально подходит для этого типа анимации. Это библиотека JavaScript, которая упрощает запись таких функций JavaScript. Есть много плагинов, доступных для jQuery, которая дает аналогичную функциональность к тому, что вам нужно - посмотреть на jQuery Marquee
Вам, конечно, придется использовать JavaScript, если только вы не хотите использовать Flash. Вы не можете сделать это без программы.
Лучше всего заглянуть в анимационную библиотеку.
Scriptaculous может делать все, что вы описываете, но делать то, что вы описываете, не для новичка на JavaScript.