Animowane liczniki w jQuery

14 kwietnia 2013
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Przedstawiamy zbiór wtyczek pozwalających na tworzenie animowanych liczników. Liczniki takie mogą służyć do wielu rzeczy np. odliczania czasu do startu strony, liczby odwiedzin czy liczby pobrań pliku. Dużą zaletą jest to, że liczniki są animowane i możemy uzyskać naprawdę ciekawy efekt wizualny na stronie.

Roundabout (Point Counter)

Po raz kolejny przedstawiamy wtyczkę Roundabout, tyle że tym razem skorzystamy z jej innej funkcji a mianowicie animowanego licznika. Mamy oczywiście możliwość konfiguracji wyglądu licznika, jednak standardowy także wygląda całkiem dobrze. Skrypt jest obsługiwany przez wszystkie nowoczesne przeglądarki oraz został wydany na licencji BSD, dzięki czemu możemy go wykorzystać do projektów komercyjnych. Na podanej stronie internetowej znajdują się kursy dla osób chcących skonfigurować wtyczkę i przy okazji zdobyć garść informacji na temat JavaScriptu.

Roundabout - zrzut ekranu licznikaStrona projektu

Apple-Style Counter

Prosty i elegancki licznik na stronę. Umożliwia liczenie np. odwiedzin. Skrypt został napisany w języku JavaScript i nie wykorzystuje Flasha. Na podanej stronie internetowej jest przedstawiony cały proces tworzenia skryptu. Autor wykorzystuje jedynie HTML, CSS i JavaScript. Istnieje także nowsza wersja programu, do której link znajduje się na podanej stronie internetowej. Nowsza wersja ma podobną funkcjonalność, jednak kod jest udoskonalony i poprawiona jest obsługa przeglądarki Chrome.

Licznik w stylu Apple - zrzut ekranuStrona projektu

jQuery Knob

Licznik w formie okręgu, który się wypełnia przy np. odwiedzinach. Możemy ustawić wielkość licznika oraz to do jakiej wartości końcowej ma dążyć i co jaką wartość przeskakiwać. Do wyboru jest kilka okręgów, ale można też utworzyć własny. Istnieje również możliwość aby to użytkownik ręcznie sterował okręgiem. Wtedy możemy sterować elementem za pomocą myszki, kółka od myszki oraz dotyku (tylko w ekranach dotykowych). Skrypt rozpowszechniany na podwójnej licencji: MIT i GPL.

Licznik w jQuery - zrzut ekranuStrona projektu

jOdometer

Licznik z obsługą przecinków. Możemy wybrać numer startowy oraz szybkość animacji.

jOdometer - zrzut ekranuStrona projektu

jQuery Number Ticker

Prosty licznik utworzony w HTML, CSS i JavaScript. Obsługuje przecinki i wyświetla poprawnie sformatowany numer. Może być użyty jako licznik odwiedzin na stronie.

jQuery Number Ticker  - zrzut ekranuStrona projektu




Koniec i bomba, a kto czytał ten trąba

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *