Анимация счетчика при прокрутке страницы

Анимированный счетчик сейчас актуален. Посетитель видит показатели в динамике. Так как анимация привлекает внимание, то взгляд пользователя задержится на этом фрагменте. Сегодня мы расскажем, как подключить плагин анимации счетчика jquery.spincrement.js.


Код этого плагина можно скачать с gitHub.
Плагин требует подключение библиотеки JQuery 2.1.4. Осуществим внешнее подключение по ссылке
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>

Для этого необходимо перейти в параметры настройки сайта

Выбрать вкладку «Добавить код в корень» и вставить туда строку подключения.

Теперь нам необходимо внедрить сам плагин и применить его к тексту.
Перейдем в режим редактирования сайта и вставим в область блок для будущего текста. Настроим параметры текста в нем.

Плагин работает таким образом, что текст в нем указывать нам не понадобится.
В область 1 разместим два блока html-кода. Можно записать скрипты и в один, но будет плохо читаться.
В первый блок кода полностью скопируем код плагина. В принципе, можно поискать ссылку на код в интернете, но кто поручится, что он там будет лежать вечно? К стати, если у вас слетела ссылка на JQuery, так как по указанному адресу библиотека больше не существует, вы можете скачать ее и вставить код прямо в сайт.
А во второй добавим код его запуска.
<script>
$(document).ready(function(){
$("#id7765f960-0ecb-5be2-81ff-17372ec217e0").spincrement({
  from:0,
  to:100,
  duration:2000});
}
);
</script>
Id блока можно получить из контекстного меню.

Потом его останется только вставить в код.
Обратите внимание на настройки плагина. Длительность (duration) измеряется в миллисекундах. Увеличивая число, вы замедляете изменение чисел.
Кроме этого вы можете указать
decimalPlaces: 0, // Сколько знаков оставлять после запятой
decimalPoint: ".", //Разделитель десятичной части числа
thousandSeparator: ",", // Разделитель тыcячных
В результате мы получим анимированный счетчик. Он начинает работать при загрузке страницы.

Запуск анимации при прокрутке


В случае, если счетчик находится где-то в конце, он сработает до того, как пользователь прокрутит до него. Поэтому необходимо отловить событие скроллинга, рассчитать координаты и запустить счетчик, когда он нужный блок появится на экране.
С благодарностью автору воспользуемся готовым скриптом
Увеличим высоту области над блоком таким образом, чтобы блок вышел за пределы экрана. Изменим код, чтобы счетчик запускался.
<script>
$(document).ready(function(){
    var show = true;
    var countbox = "#iddb8b230d-3796-7d76-98f8-f8d926123d29";
    $(window).on("scroll load resize", function(){
         if(!show) return false;                   // Отменяем показ анимации, если она уже была выполнена
         var w_top = $(window).scrollTop();        // Количество пикселей на которое была прокручена страница
        var e_top = $(countbox).offset().top;     // Расстояние от блока со счетчиками до верха всего документа
         var w_height = $(window).height();        // Высота окна браузера
        var d_height = $(document).height();      // Высота всего документа
         var e_height = $(countbox).outerHeight(); // Полная высота блока со счетчиками
         if(w_top + 200 >= e_top || w_height + w_top == d_height || e_height + e_top < w_height){
            $("#id7765f960-0ecb-5be2-81ff-17372ec217e0").spincrement({
              	from:0,
              	to:100,
                duration: 5000
            });
             show = false;
        }
    });
});
</script>
Элемент var countbox = "#iddb8b230d-3796-7d76-98f8-f8d926123d29" — это ссылка на область, содержащую блок счетчика. Ее id также узнаем из контекстного меню.
Обратите внимание на строчку if(!show) return false;
Если вы хотите, чтобы ваша анимация запускалась каждый раз, как блок попадает в поле видимости, закомментируйте ее.
Теперь когда пользователь прокрутит страницу до блока с цифрами, плагин запустится и начнется отсчет.
29 april 2017, 07:49    Ivan Web-дизайн 0    4 0

Comments (0)

    You need to login to create comments.