<rolling-number> is an easy-to-use inline Web Component This easy-to-use web component shows a nice rolling digit animation.
- The <rolling-number> component can be used out-of-the-box with a monospaced font.
- The webcomponent inherits the font-family from it's parent.
- Depending on the font-family your letterspacing will vary
Add the following to an HTML document:
<script type="module" src="path/to/rolling-number.js"></script>
npm i @hanspeleman/rolling-number
Value by fallback
<rolling-number>123</rolling-number>
Value w/o fallback
<rolling-number value="123"></rolling-number>
Customize roll duration
<rolling-number style="--roll-duration:750ms" value="123"></rolling-number>
- Fixed inline css typo
- Fixed inline css so other non-monospaced fonts are nicely aligned in each digits column
- Add an observer wich will initiate the animation only when it's in view
- Reset the element each time it's out of view
- Add full support for non-monospaced fonts
- Add feature the roll n-times
- ...
This repository is based on @layflags/rolling-number.