Как сделать таймер отсчёта как на фото?

Question

[schip454]

Всем привет!
Есть таймер, когда истекает каждый десяток (минут, секунд и так далее),десятки листаются по обычному вперед, а единицы резко начинают проигрываться в обратную сторону. Как сделать так, как на фото? Т.е. чтобы десятки шли вниз?


Также желательно привязать к localStorage, чтобы при перезагрузке страницы таймер не сбрасывался.
Буду благодарен за помощь

Код: https://codepen.io/schip454/pen/VwVOpXW

Comments

[Алексей Уколов]

Это не фото.

[schip454]

Алексей Уколов, не понял

Answer 1

[alexalexes]

Нужно менять механику смещения параметра в translate3d, чтобы смещение по вертикали анимировалось между (n/2) и (n/2) + 1 высотой списка (перелистывались соседние элементы центральной части списка). Когда анимация достигнет уровня (n/2) + 1, нужно сделать два одновременных действия: 1 - переставить последний элемент списка на первое место, 2 - вернуть уровень до отметки (n/2). Тогда будет достигнут эффект замкнутости и цикличности списка и анимация не будет откатываться назад.

Comments

[schip454]

Сможешь помочь с кодом? Не совсем уловил суть