Skip to content
Advertisement

Roll Counter Increment by 1

I need help on the script for the counter to increment by one and have a animation of the incremented number, slide to top

enter image description here

something like that on the picture and this is what I have done so far.

JavaScript
JavaScript

Advertisement

Answer

You should probably use some existing library for that. But if you want to have your own implementation, then use the following elements:

  • Use CSS transitions, and in particular the transition property and the transitionend event.
  • Build the inner HTML dynamically, so that in the original HTML you only have the container element, which will initially be empty.
  • Let the HTML at the deepest level (for one digit) be 3 lines: on each line you put a digit. For example 8<br>9<br>0. They should form a sequence. Scroll the middle digit into view so that only that digit is visible. Perform the animation upward or downward as needed, and when the animation is complete, update the HTML and reset the scroll offset (which can be the top CSS property).
  • There is no need to have the span elements. Just put the content straight into the li elements.
  • Use promises, which make asynchronous code look better, certainly when using await

So here is how you could do it:

JavaScript
JavaScript
JavaScript

There are some arguments you can use to modify the speed of the animations. There is also an argument that determines whether the dials roll upward or downward for getting the next digit.

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement