19.02.2018 10:45:00
В данной статье мы рассмотрим как сделать на сайте анимированный счетчик чисел, который будет запускаться, когда пользователь прокрутит страницу и увидит его.
Данный пример рассмотрим на сайте под управление 1С-Битрикс с использованием плагина
spincrement.
Поэтому Мы сначала открываем шаблон нашего сайта и в теге
<head> подключим плагин, который своевременно скачали.Так же убедитесь, что подключен плагин Jquery.
P.S. Архив с плагином приложен к статьй, вместе с примером от разработчика на GitHub
<script src="<?=SITE_TEMPLATE_PATH?>/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.spincrement.js"></script>
Добавляем блоки с числами в наш шаблон сайта или модуля. Добавим два блока для примера: один - обычное число, второй - число с процентом.
<span class="count">10</span>
<span class="count2">100</span>%
Так же прописываем функцию, в которую мы будем передавать имя класса тега, значение которого мы хотим увеличивать.
function countup(className){ //className - имя класса, в котором есть число
var countBlockTop = $("."+className).offset().top; //смещение блока с числом относительно верхнего края
var windowHeight = window.innerHeight;//высота окна браузера
var show = true;// отвечает, что если один раз счетчик сработает, больше не срабатывал
$(window).scroll( function (){
if(show && (countBlockTop < $(window).scrollTop() + windowHeight)){
show = false; //если мы видим число, то больше его не надо показывать
$('.'+className).spincrement({ //вызов плагина с параметрами
from: 1, //начинать с 1
duration: 4000, //задержка счетчика
});
}
})
}
Теперь добавляем вызов функции счетчика
$(function() {
countup("count");
countup("count2");
});
В итоге у меня получилась такая запись.
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.spincrement.js"></script>
<script>
function countup(className){
var countBlockTop = $("."+className).offset().top;
var windowHeight = window.innerHeight;
var show = true;
$(window).scroll( function (){
if(show && (countBlockTop < $(window).scrollTop() + windowHeight)){
show = false;
$('.'+className).spincrement({
from: 1,
duration: 4000,
});
}
})
}
$(function() {
countup("count", $(".count").text());
countup("count2", $(".count2").text());
});
</script>
Наш код готов, можем проверять. У меня данный механизм реализован ниже статьи.
Со всеми настройками плагина можно ознакомиться на странице
github.
