Tekstowy animowany licznik (odometer)

Od czasu do czasu fajnie jest pokazać jakiś licznik, a to klientów, a to czasu do otwarcia. Fajnie by licznik był ładny i robił efekt wow.

Jeśli pasuje nam grafika, lub mamy czas by przygotować sprite do animacji to polecam Apple Style Counter, jeśli nie chcemy się bawić w robienie grafiki dla każdej cyferki to dość łatwo można zrobić licznik przy pomocy CSS i JQuery.

Część graficzną i CSS pozostawiam Tobie bo to zwykle i tak każdy robi po swojemu. Możesz też podejrzeć nasz licznik nauczycieli i uczniów użytkowników naszego edziennika

odometer

Część licząca w JQuery jest dość prosta jak ogarniemy zasady. Oczywiście nie będzie efektu przewracanych kafelków tylko prosta zamiana cyferek, ale dla tak prostego wkładu, uzyskany efekt jest przyjemny dla oka.

 

//  0 ){
    return new Array( width + 1 ).join( '0' ) + number;
  }
  return number + ""; // always return a string
}

window.onload = function(){
    $.ajax({
        'url': 'http://dziennikel.appspot.com/counters',
        'dataType': 'jsonp',
        'success':function(data, textStatus, jqXHR) {
            jQuery({count:0}).animate({count:data.teachers}, {
                duration: 2500,
                step: function() {
                    $('.counters .teacher-count').text(zeroFill(this.count.toFixed(0), 6));
                }
            });
            jQuery({count:0}).animate({count:data.students}, {
                duration: 2500,
                step: function() {
                    $('.counters .student-count').text(zeroFill(this.count.toFixed(0), 6));
                }
            });
        }
    });
};
// ]]>
Advertisements
Categories: Web Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s