View on GitHub

rotate-number

A simple jQuery plugin to create animations of digital number rotation. Compatible with Zepto.

Download this project as a .zip file Download this project as a tar.gz file

Rotate number plugin

A simple jQuery plugin to create animations of digital number rotation. Compatible with Zepto.

Usage

HTML Snippet

<div id="rotate"></div>

Javascript

var rotator = $("#rotate").rotateNumber({digits: 5});

CSS

#rotate {
  font-family: Arial;
}
#rotate .digit {
  width: 30px;
}

Update Number

rotator.setNumber(NEW_NUMBER);

Resize

rotator.resizeDigit(NEW_FONT_SIZE);

Options

Option Description Default
digits Number of the digits 3
digitSize Font size of the digits 50
rotateDuration Duration of the rotate animation 0.6 (s)
separator Insert separator per 3 digits (e.g. ',') None