jQuery Анимирано увеличаване на числата
Анимирани увеличения на числа (наричани по-нататък броячи) вече могат да бъдат намерени в много сайтове, защото с тяхна помощ можете да показвате числата по по-интересен и атрактивен начин.
Този ефект изглеждакато плавно нарастване на числото от 0 до някакво крайно число. Сигурен съм, че вече сте срещали такива броячи повече от веднъж.
Като правило те се използват за показване на някаква статистика, например общия брой потребители, абонати, клиенти и др.
В този урок ще ви покажа как можете да инсталирате такъв брояч на вашия сайт.
За тези цели ще използваме готов плъгин, нареченjquery.spincrement.js
Това ще ни позволи да създадем ефекта на анимирано увеличение на числата.
Бърз старт
За да започне да работи този скрипт, имаме нужда от:
1. Изтеглете го от GitHub и го включете между таговетеhead. В същото време библиотеката jQuery също трябва да бъде включена, в противен случай нищо няма да работи.
2. Опаковайте числото (или числата), които искате да показвате анимирано, в някакъв таг и задайте класаspincrement.
3. Инициализирайте плъгина
Ако сте направили всичко правилно, тогава нашите числа ще започнат да се анимират.
Настройка на плъгина
Този плъгин има малък брой настройки, с които можете да направите брояча по-гъвкав.
В примера показах основните със стойности по подразбиране. Ако е необходимо, можете да промените някой от параметрите.
Като цяло всичко вече работи добре за нас, но проблемът е, че броячите започват да показват анимация веднага след зареждането на страницата, но в действителност може да се окаже, че блокът с броячите ще бъде някъде в долната част на страницата и в тази ситуация,вашият посетител просто няма да види никаква анимация.
За да се избегне това, този вид анимация трябва да се стартира не в момента на зареждане на страницата, а само когато потребителят директно е превъртял страницата до желания блок и вече го е видял в прозореца на браузъра.
Задействане на анимация при превъртане на страница
За тези цели написах малък скрипт
Ето как изглежда блокът с броячи
Сега анимацията ще се стартира само ако потребителят е превъртял страницата до блока#counts, в моя случай този блок е вид общ контейнер, който съдържа три брояча. Разбира се, може да има произволен брой от тези броячи.
По-подробно за работата на този скрипт разказах в моя урок.