CSS Number Scroll

Demostration

Source Code

HTML

<span id="timestamp"></span>

CSS

.num { display:inline-block;position:relative;overflow:hidden;width:1em;font-size:28px;text-indent:-1.5em; }
.num:before { content:attr(b);position:absolute;left:1.2em;top:-1.5em; }
.num:after { content:attr(a);position:absolute;left:1.2em;top:0px; }
.num.anim200:before { transition: top 0.2s; }
.num.anim200:after { transition: top 0.2s; }
.num.ba:before { top:0px; }
.num.ba:after { top:1.5em; }
.num.init:before { top:0px; }
.num.init:after { top:-1.5em; }
.num.ab:before { top:1.5em; }
.num.ab:after { top:0px; }

Javascript ( Based on jQuery )

//render();
$('#timestamp').text('00'+$.now());
var arrnum = $.trim($('#timestamp').text()).split('');
$('#timestamp').empty();
for(var i=0,l=arrnum.length;i<l;i++){
	$('#timestamp').append('<span class="num" a="'+arrnum[i]+'">'+arrnum[i]+'</span>');
}

//refresh();
setInterval(function(){
	var now = $.now();
	var arrNew = (now+'').split('');
	var arrOld = $('#timestamp').text().split('');
	while(arrOld.length-arrNew.length){
		arrNew.unshift('0');
	}
	for(var i=0,l=arrNew.length;i<l;i++){
		if(arrNew[i] == arrOld[i]){
			continue;
		}
		scroll($('#timestamp').children(':nth-child('+(i+1)+')'),arrNew[i]);
	}

},1234);

var scroll = function(node,num){
	if(!node.hasClass('ba')){
		node.text(num).attr('b',num).removeClass('init ab').addClass('anim200');
		setTimeout(function(){
			node.addClass('ba');
		},0);
		setTimeout(function(){
			node.removeClass('anim200').addClass('init');
		},1000);
	}else{
		node.text(num).attr('a',num).removeClass('ba').addClass('anim200');
		setTimeout(function(){
			node.addClass('ab');
		},0);
		setTimeout(function(){
			node.removeClass('anim200 init ab');
		},1000);
	}
};

Try it on your Mobile

Support or Contact

Having any trouble or suggestion? Feel free to leave a feedback.