Октябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Счетчик цифт для landing с эффектом размытия


При скролле сайта вниз появляются цифры и начинают увеличиваться, такая секция иногда используется на лендингах, поэтому разберем подробнее как настроить.

Сперва зададим html структуру из cекеции с идентификатором id=line.

В контейнере будет четыре колонки col-md-3.

Для средних мониторов и для маленьких две col-sm-6.

У каждой колонки будет обертка с классом line-wrap.

Внутри будет див с атрибутом data-nmbr=5, число до которого будем считать от нуля и класс line-num.

Внутри каждого дива 0, счетчик от нуля до значения атрибута data-nmbr.

Под дивом текст.

Код index.html.

Добавим стили css для счетчика цифр.

Сделаем секцию в виде полосы с внешними отступами padding: 20px и расположим ее внизу margin-top: 700px, чтобы при скролле страницы мышкой вниз.

В момент, когда секция была 200px от верхнего края окна, активировался счетчик цифр.

Фон у секции синий, а текст белый.

  1. Зададим для обертки &-wrap бордюр border: 3px solid #b641b0 и выровняем по центру text-align: center.
  2. Для текста сделаем все заглавные буквы text-transform: uppercase.
  3. Для цифр &-num установим размер шрифта побольше font-size: 5em. Изначально сделаем невидимые цифры opacity: 0.
  4. Добавим новый класс visible, который будет присваиваться скриптом счетчика. Когда добавим класс visible, мы увидим цифры, для этого добавим свойство opacity: 1. Добавим плавный пересчет transition: .3s.

Пишем код счетчика в common.js.

Должно получится в браузере.

Должно получится в браузере счетчик цифр

Функция счетчика цифр.

  1. Добавим переменную time =3, сколько будет длится накрутка цифр.
  2. Для все секции с идентификатором #line задаем функцию
  3. Задаем переменную i=1, которая выводится в дивах, где изначально стоит ноль.
  4. В переменную number добавляем значение атрибута data-nmbr=n, с помощью нее высчитываем задержку step, во вторых переменная смотрит сколько будет выполняться код i<=number.
  5. Высчитываем сколько будет выполняться пересчет каждой единицы step = 1000*time/number, в миллисекундах.
  6. При помощи переменной that выводим на страницу значение цифры that.html (i).
  7. Переменной int присвоим метод setInterval, который будет выполнят функцию с шагом step. Код будет выполняться, пока не будет условия очистки интервала clearInterval (int).

Задаем переменную i=1, которая выводится в дивах

В начале скрипта идет параметр сравнения 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).

Дорабатываем счетчик под наши условия.

  1. Привязываем к сколлу мышки скрипт счетчика, для этого сверху пишем $(window).scroll (function () и закрываем кавычки под счетчиком.
  2. Высчитаем две переменные со значением расположения нашей позиции counter =$(this).offset ().top  и позицию верха окна topWindow =$(window).scrollTop ().
  3. Задаем условие if (counter<topWindow+200), то начнется выполнение пересчета чисел с помощью кода счетчика. Фигурная скобка закрывается в конце счетчика. Добавляем 200px, отодвигаем от верха страницы, выполнения условия запуска счетчика цифр.
  4. Если будет перематывать страницу в верх низ, то счетчик каждый раз будет запускаться. Для этого делаем проверку дополнительной переменной ch=1. Добавляем условие if (ch<2) переменная меньше двух, то выполняется код счетчика. Изначально всегда будет меньше двух. Чтобы второй раз не запускался код счетчика, увеличим переменную ch. Перед очисткой интервала добавим ch=ch+2.
  5. Присвоим класс visible, для отображения цифр opacity: 1. $(.line-num).addClass (visible).
  6. Сделаем размытие цифр изначально, которое плавно пропадает и цифры будут четко видны $({blurRadius: 3}).animate ({blurRadius: 0}.

Код в common.js

Комментариев нет