Каков принцип переворачивающегося таймера на JS?

Question

[Максим Золотой]

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

Answer 1

[Eugene Chefranov]

Через transform3d и Rotate https://codepen.io/jerrylow/pen/jVoWwp

Comments

[Максим Золотой]

Спасибо, сейчас разберусь в коде) удивило на первый взгляд что там нет JS

Answer 2

[Александр Симонов]

10 гифок по одной для каждой цифры, и в соответствии от времени выбирается нужная гифка проигрывается и заменяется следующей. По крайней мере так делали раньше, а вот сейчас может как-то похожим образом можно через svg, но я в этом не очень опитен

Comments

[Максим Золотой]

да ну, вы что) какие гифки во времена такого развития фронтенда)

[Александр Симонов]

Максим Золотой, ну например если нужно поддерживать IE8)

[Максим Золотой]

Александр Симонов, ну да) хотя у меня есть идея - надо создать сайт типа iecrap.com и просто что бы люди делали на него редирект со своих сайтов если кто то заходит с ie старых версий) ну а на сайте написать что надо хром использовать)

[Александр Симонов]

Максим Золотой, не у всех есть возможность использовать хром или что-то новое хорошее

[Максим Золотой]

Александр Симонов, почему?

[Александр Симонов]

Максим Золотой, ну представьте, вы работаете кассиром в гипермаркете маленького города и там на компе 98 виндовс) А в интернеты хочется

[alexalexes]

Про кассира не совсем та ситуация описана.
Если вы этот таймер хотите на развлекательном сайте добавить, а он не должен сайтом пользоваться в рабочее время, то мы на его браузер не рассчитываем, так как человек с рабочим компом не будет единицей аудитории сайта.
Если таймер стоит в интерфейсе просмотра накладных товаров, то совместимость с тем браузером, которым он будет ее просматривать обязательно нужно предусматривать - это его рабочий инструмент, сайт должен быть совместим с ним.
В общем, если есть требования совместимости, опирающиеся на ПО целевой аудитории, то вариант с гифками имеет место быть.

[Александр Симонов]

alexalexes, а ваш пример очень хорош

[Максим Золотой]

В итоге я сделал слайдер - github
Целый день его делал. Обрадовался такой - думаю в пару проектов его запихаю. Выкатил уже и когда зашел с мобильника увидел NaN вместо цифр. А на десктопе все работает. Вообще печаль