Работа со скриптами. Урок 06. Бегущий счетчик
Заходим на гитхаб, вбиваем в поиск counter up, первый результат - самый популярный репозиторий с таким именем. Скачиваем командой:
$ bower i https://github.com/bfintal/Counter-Up.git
$ bower i https://github.com/bfintal/Counter-Up.git
Ещё нам необходим скрипт waypoints.js
Скачиваем и его
$ bower i waypoints
Подключаем
<script src="bower_components/jquery-waypoints/waypoints.min.js"></script>
<script src="bower_components/Counter-Up/jquery.counterup.min.js"></script>
В файле custom.js подключение выглядит так (скопировано с гитхаба)
$('.counter').counterUp();
В разметке счетчику присваиваем класс .counter. Примеры разметки есть на гитхабе
<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>
Best practices давать классам, которые используем в js, названия, которые об этом говорят. Поэтому вместо класса counter используем js-counter
Дополнительные свойства счётчика
$('.counter').counterUp({
delay: 10,
time: 1000});
Первое - задержка перед началом подсчёта, второе - время. Если есть разные цифры - большие и маленькие, есть смысл для них сделать два счётчика с разной скоростью.
Проблемой является то, что данный скрипт корректно работает только с waypoints.js версии 2, а с новым waypoints.js появляется ошибка, которую можно увидеть в консоли.
Узнаём, какая версия у нас установлена
$ bower info jquery-waypoints
Видим список версий, последняя - наша.
Удаляем текущую версию
$ bower uninstall waypoints
Устанавливаем версию 2.0.0
bower install waypoints#2.0.0
Скачиваем и его
$ bower i waypoints
Подключаем
<script src="bower_components/jquery-waypoints/waypoints.min.js"></script>
<script src="bower_components/Counter-Up/jquery.counterup.min.js"></script>
В файле custom.js подключение выглядит так (скопировано с гитхаба)
$('.counter').counterUp();
В разметке счетчику присваиваем класс .counter. Примеры разметки есть на гитхабе
<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>
Best practices давать классам, которые используем в js, названия, которые об этом говорят. Поэтому вместо класса counter используем js-counter
Дополнительные свойства счётчика
$('.counter').counterUp({
delay: 10,
time: 1000});
Первое - задержка перед началом подсчёта, второе - время. Если есть разные цифры - большие и маленькие, есть смысл для них сделать два счётчика с разной скоростью.
Проблемой является то, что данный скрипт корректно работает только с waypoints.js версии 2, а с новым waypoints.js появляется ошибка, которую можно увидеть в консоли.
Узнаём, какая версия у нас установлена
$ bower info jquery-waypoints
Видим список версий, последняя - наша.
Удаляем текущую версию
$ bower uninstall waypoints
Устанавливаем версию 2.0.0
bower install waypoints#2.0.0