Анимация цифр

Анимация на JavaScript + CSS

На этой странице испытываю ещё одну интересную возможность, которую позволяет реализовать JavaScript совместно с базовой технологией интернета - CSS.

Это анимация цифр. И именно цифр, а НЕ их рисунков.

Примеры анимации цифр

Изучая этот интересный эффект, сделал два примера. В первом цифры увеличиваются, а для второго прописал их уменьшение.

Но принцип создания примеров абсолютно одинаковый!

Анимация осуществляется сменой значения (только лишь с помощью JavaScript) у свойства CSS margin-left для элемента с цифрами.
Продолжительность анимации, задаётся в формате CSS time, то есть в секундах - s или миллисекундах - ms.

Первый пример. Увеличение

Для этого примера в HTML-коде прописал цифры от "0" до "15".

Запускается кликом по цифре.   *для повторного просмотра, страницу нужно перезагрузить*

*Prim.  Конечно, после срабатывания этого примера анимации, последняя цифра всё же отображается не совсем корректно, но если увеличить хоть чуть-чуть размер видимой зоны, то становится видна следующая за "0" единица.

Второй пример. Уменьшение

Для данного примера в HTML-коде прописал цифры от "15" до "0".

Запускается аналогично.   *для повтора анимации, страницу перезагрузить*

Пояснения к примерам анимации цифр

Прописывая цифры в HTML-коде, пробелы между ними НЕ ставить!  Иначе они все "вытянутся" вниз, и будут (после клика) "подтягиваться" на место "0".

Чтобы они не сливались, сделал пробелы с помощью кода непрерывного пробела, т.е. амперсанда -  , который сработал отлично!

Однако!  Код амперсанда   (широкий пробел) НЕ применять!

С его участием происходит такая же ерунда, что и с обычным пробелом. Цифры выстраиваются в вертикальный столбик даже(!) при использовании 1-ого такого кода.

Подробно о кодах этих символов здесь: "Амперсанды" (в новом окне).

* * *

Если в JS-коде прописать не "0", как сейчас, а "8", скажем, тогда анимация начнётся с цифры "7", т.к. для скрипта первая цифра (по счёту символов) - "0".

Чем больше цифр мы хотим заставить двигаться, тем больше следует в коде CSS сделать значение у свойства margin-left. И наоборот.

Да и вообще - кроме запуска (по клику) и отметки с какого символа начнётся анимация, всё управление ею и её настройка проводятся в коде CSS.

К примеру, сейчас я сделал так, чтоб по завершению анимации оставалась последняя, из прописанных в коде HTML-цепочки, цифра.

А если бы было нужным, чтобы по завершению анимации зона видимости становилась пустой (что гораздо проще), то значения свойства margin-left в CSS-кодах были бы уже другими. Такими, как написал ниже.

**Для первого примера:

#primer.animate {
margin-left: -990px;
.....................
}

**Для второго примера:

#primerM.animate {
margin-left: -1100px;
.....................
}

И ширину видимой области можно было бы оставить неизменной - 36px. Так, как показал в кодах ниже.

**Для первого примера:

#cifry {
width: 36px;
................
}

**Для второго примера:

#cifryM {
width: 36px;
................
}

А сейчас они разные, и зависят от ширины первой и последней цифр. Вот почему в первом из показанных примеров мне так и не удалось настроить корректное отображение последней цифры (15).
Слишком большая разница в ширине между первой - "0" и последней - "15".

Если же зону просмотра после анимации делать пустой, то таких проблем не возникает. "Уехали" цифры - и "уехали", а куда и на сколько пикселей(?) - не важно!  Главное, что в зоне просмотра их уже не будет видно.

*Prim.   В показанных примерах я подбирал минимальное смещение, но это не обязательно.

Послесловие

Интересные примеры анимации цифр, конечно, и им, думаю, довольно легко найти практическое применение.
А что сразу пришло в голову, - прописать вместо первой цифры в цепочке символ вопроса - ?   Получается очень интересно. Пробовал!

Ну, а что делать дальше, зависит уже от задач и целей веб-мастера.

Кстати!  CSS-коды и JavaScript, которые я использовал для создания обоих примеров анимации цифр совсем маленькие и простые, и никакого jQuery НЕ потребовалось, что тоже имеет большое значение!

Код лёгкий! И он весь находится на этой странице.

* * *

Ещё один интересный, и вполне практический пример анимации цифр сможете посмотреть здесь: "Часы" (откроется в новом окне).

* * *

Поскольку оба, показанных на этой странице примера, одинаково относятся к двум большим разделам: JavaScript и CSS, то и вернуться в них можно прямо.

ВВЕРХ