Комментарии: Создаем текстовое перекидное табло в Photoshop

Автор: Nash

Nash — Mon, 05 Aug 2013 18:21:43 +0000

Для этого вам понадобится отрисовать все моменты анимации, а это статическое число+момент перелистывания на 1/3 и 2/3 (поправьте если не прав). То есть ка каждое число 3 картинки, к буквам все то же самое. Это пока единственный вариант, который я видел, для решения это задачи. Писать код на JS думаю будет более трудоемко и таких работ я пока не видел.

Автор: marina

marina — Tue, 11 Jun 2013 09:31:49 +0000

Для эффекта перелистывания нужно использовать скрипт. В этом случаем вместо изображения подложки с помощью кода задать линейный градиент. И при смене градиента задавать transition.

Автор: Денис

Денис — Tue, 11 Jun 2013 09:29:16 +0000

Я имел ввиду, чтобы это было интерактивно — табло перекидывалось, например: часы, таймер, какой-нибудь счетчик и т.д.

Автор: marina

marina — Tue, 11 Jun 2013 09:17:39 +0000

Самый простой вариант для отображения:

TYPE

Стили:

.block{background:url (gradient.png) repeat-x; position:relative; width:452px; height:227px }

.text{font:bold 174px Arial, sans serif; color:#fff}

.line{position:absolute; height:3px; width:100%; background:#623e3e; top:46%; z-index:2}

.block b{ position:absolute; z-index:3; width:452px; height:14px; top:43%}

.block i{ display:inline-block; background:url (little-gradient.png); width:4px; height:14px; margin-left:18px }

.block i:nth-child (2n){margin-left:64px}

.block i:nth-child (2){ margin-left:66px }

.block i:nth-child (2n+1){ margin-left:34px }

.block i:first-child{ margin-left:20px }

Автор: Денис

Денис — Tue, 11 Jun 2013 08:06:28 +0000

А вот как, интересно, это реализовать на сайте?