При скролле сайта вниз появляются цифры и начинают увеличиваться, такая секция иногда используется на лендингах, поэтому разберем подробнее как настроить.
Сперва зададим html структуру из cекеции с идентификатором id=line.
В контейнере будет четыре колонки col-md-3.
Для средних мониторов и для маленьких две col-sm-6.
У каждой колонки будет обертка с классом line-wrap.
Внутри будет див с атрибутом data-nmbr=5, число до которого будем считать от нуля и класс line-num.
Внутри каждого дива 0, счетчик от нуля до значения атрибута data-nmbr.
Под дивом текст.
Код index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<section id="line"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="line-wrap"> <div data-nmbr="5" class="line-num">0</div> <p>Лет на рынке</p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="line-wrap"> <div data-nmbr="100" class="line-num">0</div> <p>Выполненых работ</p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="line-wrap"> <div data-nmbr="250" class="line-num">0</div> <p>Партнеров и поставщиков</p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="line-wrap"> <div data-nmbr="500" class="line-num">0</div> <p>Готовых проектов</p> </div> </div> </div> </div> </section> |
Содержание статьи
Добавим стили css для счетчика цифр.
Сделаем секцию в виде полосы с внешними отступами padding: 20px и расположим ее внизу margin-top: 700px, чтобы при скролле страницы мышкой вниз.
В момент, когда секция была 200px от верхнего края окна, активировался счетчик цифр.
Фон у секции синий, а текст белый.
- Зададим для обертки &-wrap бордюр border: 3px solid #b641b0 и выровняем по центру text-align: center.
- Для текста сделаем все заглавные буквы text-transform: uppercase.
- Для цифр &-num установим размер шрифта побольше font-size: 5em. Изначально сделаем невидимые цифры opacity: 0.
- Добавим новый класс visible, который будет присваиваться скриптом счетчика. Когда добавим класс visible, мы увидим цифры, для этого добавим свойство opacity: 1. Добавим плавный пересчет transition: .3s.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#line margin-top: 700px padding: 20px background: blue color: #fff .line margin: 0 &-wrap text-align: center border: 3px solid #b641b0 p margin-top: 5px text-transform: uppercase font-weight: 200 &-num font-size: 5em font-weight: bold opacity: 0 .visible opacity: 1 transition: .3s |
Пишем код счетчика в common.js.
Должно получится в браузере.
Функция счетчика цифр.
- Добавим переменную time =3, сколько будет длится накрутка цифр.
- Для все секции с идентификатором #line задаем функцию
- Задаем переменную i=1, которая выводится в дивах, где изначально стоит ноль.
- В переменную number добавляем значение атрибута data-nmbr=n, с помощью нее высчитываем задержку step, во вторых переменная смотрит сколько будет выполняться код i<=number.
- Высчитываем сколько будет выполняться пересчет каждой единицы step = 1000*time/number, в миллисекундах.
- При помощи переменной that выводим на страницу значение цифры that.html (i).
- Переменной int присвоим метод setInterval, который будет выполнят функцию с шагом step. Код будет выполняться, пока не будет условия очистки интервала clearInterval (int).
В начале скрипта идет параметр сравнения if если i<=number, то выводим значение that.html (i).
Затем прибавляем i++ единицу к переменной i и возвращаемся наверх, проверяем условие будет ли цифра меньше или равна атрибуту дива data-nmbr=5 , если стала больше, в какой то момент, потому что каждый шаг цикла увеличивается на единицу, то выполняем else с очисткой интервала clearInterval (int) и метод setInterval перестает работать.
Чем больше атрибут data-nmbr=n, тем дольше выполняется цикл и тем быстрее нарастают цифры счетчика из формулы step = 1000*time/number, так как в формуле есть атрибут number=$(this).data (nmbr).
Дорабатываем счетчик под наши условия.
- Привязываем к сколлу мышки скрипт счетчика, для этого сверху пишем $(window).scroll (function () и закрываем кавычки под счетчиком.
- Высчитаем две переменные со значением расположения нашей позиции counter =$(this).offset ().top и позицию верха окна topWindow =$(window).scrollTop ().
- Задаем условие if (counter<topWindow+200), то начнется выполнение пересчета чисел с помощью кода счетчика. Фигурная скобка закрывается в конце счетчика. Добавляем 200px, отодвигаем от верха страницы, выполнения условия запуска счетчика цифр.
- Если будет перематывать страницу в верх низ, то счетчик каждый раз будет запускаться. Для этого делаем проверку дополнительной переменной ch=1. Добавляем условие if (ch<2) переменная меньше двух, то выполняется код счетчика. Изначально всегда будет меньше двух. Чтобы второй раз не запускался код счетчика, увеличим переменную ch. Перед очисткой интервала добавим ch=ch+2.
- Присвоим класс visible, для отображения цифр opacity: 1. $(.line-num).addClass (visible).
- Сделаем размытие цифр изначально, которое плавно пропадает и цифры будут четко видны $({blurRadius: 3}).animate ({blurRadius: 0}.
Код в common.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
$(function() { var time =3, ch=1; $(window).scroll(function(){ $('#line').each(function(){ var counter =$(this).offset().top, topWindow =$(window).scrollTop(); if (counter<topWindow+200) { if (ch<2) { $('.line-num').addClass('visible'); $({blurRadius: 3}).animate({blurRadius: 0},{ duration: 2000, easing: 'swing', step: function() { $('.line-num').css({ "filter": "blur("+this.blurRadius+"px)" }); } }); $('.line-num').each(function(){ var i=1, number=$(this).data('nmbr'), step = 1000*time/number, that=$(this), int=setInterval(function(){ if (i<=number) { that.html(i); } else{ ch=ch+2; clearInterval(int); } i++; },step); }); } } }); }); }); |