Installation

Usage

Add this HTML code into a page.

<span class="digit-scroller" data-number=""></span>

Attribute

There are 2 attributes used inside HTML tag:

1. data-number
2. data-separator

• 1. data-number

Only digit input from 0 to 9 and minus symbol "-" are accepted. Any text or symbol will be ignored and the output will show "0". This attribute is required.

For example:

<span class="digit-scroller" data-number="12345"></span>

gives:

If the number is negative, the scroll direction is reversed from the positive number. For example.

<span class="digit-scroller" data-number="-54321"></span>

gives:

• 2. data-separator

Add specific separator when number has more than 3 digits. This attribute is optional.

By default, all digit is adjacent to each other when generated, all the symbol when added will be taken out in the attribute data-number.

data-separator uses 3 values: "dot", "comma" and "space".

For example:

<span class="digit-scroller" data-number="12345" data-separator="dot"></span>
<span class="digit-scroller" data-number="12345" data-separator="comma"></span>
<span class="digit-scroller" data-number="12345" data-separator="space"></span>

give:

data-separator="dot">:

data-separator="comma">:

data-separator="space">:

Configuration

By default, positive number scrolls up, negative number scrolls down. User can override by adding this code into your personal script or site-wide Javascript to change the direction.

window.dev = window.dev || {};
window.dev.digitScroller = {
	positiveDirection: 'down',
	negativeDirection: 'up',
};
runDigitScroller();

Fallback

Since the script does not run on mobile, users need to consider adding a plain text inside the HTML content. For example:

<span class="digit-scroller" data-number="12345">12345</span>

When the visitors view any pages which are using this digit in mobile view, only the plain text shows to avoid empty content being generated.

Style

Script uses the stylesheet with the same name to import the style for the digit animation. Users can change the styles based on their preferences. However, remember to add !important to override the style determined by the script.

For example:

.digit-scroller__digit-strip {
	transition: transform .5s cubic-bezier(.2,.9,.3,1);
}

This will change the speed of the digit scroll to make it run faster.

Changelog