0

Как сделать чтобы числа увеличивались от 0 до нужного числа при прокрутке страницы ?

  1. Увеличение чисел от 0 до сами можем указать число
  2. Как только доходим до блока с цифрами они должны увеличиваться
  3. В примере указана число 26
  4. Увеличение будет от 0 до 26
  5. Указать можно любое число и до этого числа будет прокрутка
  6. Ссылка для наглядности как должно выглядеть
  7. вот пример кода Анимация увеличения чисел при прокрутке страницы скажите как прикрутить скролл ?

https://www.templatemonster.com/ru/demo/71650.html 8. Как такое можно сделать ?

.s-figure {
  background-image: url("../img/figure-img.png");
  background-size: cover;
  background-position: center;
  padding-top: 159px;
  padding-bottom: 180px; }

.figure__title {
  color: #f9f9f9;
  font-family: "Century Gothic";
  font-size: 30px;
  font-weight: 700;
  width: 347px;
  max-width: 347px;
  margin-bottom: 0; }

.figure-block {
  color: red;
  font-family: "Century Gothic";
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  text-align: center; }

.figure__text {
  color: red;
  font-family: "Century Gothic";
  font-size: 60px;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 30px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<section class="s-figure">
	<div class="container">
		<div class="row">
			<div class="col-lg-2 col-md-4">
				<div class="figure-block">
					Авторские<br> свидетельства;
					<p class="figure__text">
						26
					</p>
				</div>
			</div>
		</div>
	</div>
</section>

11
  • Эмм... а "нужное число" - это какое?) И что оно из себя будет представлять? Может % проскролленного расстояния? 7 июн 2019 в 0:02
  • @OPTIMUS PRIME templatemonster.com/ru/demo/71650.html
    – Leks
    7 июн 2019 в 0:05
  • @OPTIMUS PRIME "нужное число мы сами вводим
    – Leks
    7 июн 2019 в 0:07
  • ru.stackoverflow.com/questions/869608/…
    – Leks
    7 июн 2019 в 4:22
  • @OPTIMUS PRIME Вы можете улучшить код чтобы работало при скролле ?
    – Leks
    7 июн 2019 в 4:22

2 ответа 2

1

Немного косячный но работает. И... должен быть способ получше, отключать событие, когда оно уже сработало... но я пока не знаю такого. Поэтому хотя бы через return; можно уменьшить кол-во лишних вычислений.

(function(){

let counter = document.querySelectorAll('.counter');
let limit = 0; // Переменная, чтобы останавливать функцию, когда всё запустится.
window.addEventListener('scroll', function(){  
  if( limit == counter.length ){ return; }
  
  for(let i = 0; i < counter.length; i++){
    let pos = counter[i].getBoundingClientRect().top; //Позиция блока, считая сверху окна
    let win = window.innerHeight - 40; // На 40 пикселей меньше, чем высота окна
    if( pos < win && counter[i].dataset.stop === "0" ){
      counter[i].dataset.stop = 1; // Останавливаем перезапуск счета в этом блоке
      let x = 0;
      limit++; // Счетчик будет запущен, увеличиваем переменную на 1
      let int = setInterval(function(){
        // Раз в 60 миллисекунд будет прибавляться 50-я часть нужного числа
        x = x + Math.ceil( counter[i].dataset.to / 50 ); 
        counter[i].innerText = x;
        if( x > counter[i].dataset.to ){
          //Как только досчитали - стираем интервал.
          counter[i].innerText = counter[i].dataset.to;
          clearInterval(int);
        }
      }, 60);
    }
  }
});

})();
.counter {
  width: 200px;
  margin: 400px 0 200px 0; 
  border: 2px solid orange;
  font-size: 30px; color: #045acf;
  text-align: center;
}
<div class="counter" data-to="26" data-stop="0">0</div>
<div class="counter" data-to="1000" data-stop="0">0</div>
<div class="counter" data-to="2500000" data-stop="0">0</div>

2
  • спасибо, плагин скинули demo.tinywall.net/numscroller
    – Leks
    7 июн 2019 в 18:29
  • 2
    function handleScroll(event) {...} - функция, что записана при замыкании в вашем ответе. window.addEventListener('scroll', handleScroll); - вешаем функцию обработчик. window.removeEventListener('scroll', handleScroll); - удаляем функцию обработчик.
    – user256824
    7 июн 2019 в 18:39
0

const numberBlock = document.getElementById("numbers");
const endPoint = 40;
const speed = 5; // скорость, время за которое нужно произвести анимацию в сек
var scores = {
  score1: { score: 0,  end: 40 },
  score2: { score: 0,  end: 30 },
  score3: { score: 0,  end: 100 }
};

window.addEventListener('scroll', function() {
  const numberBlockPos = numberBlock.offsetTop,
        winHeight = window.innerHeight;
  let winScrollTop = window.scrollY,
      scrollToElem = winScrollTop + winHeight,
      anamatedNumbers = false;
  
  if( (scrollToElem + 30 > numberBlockPos) && !anamatedNumbers) {
    TweenMax.to(scores.score1, speed, {score: scores.score1.end, onUpdate: updateHandler, onUpdateParams: [1]});
    TweenMax.to(scores.score2, speed, {score: scores.score2.end, onUpdate: updateHandler, onUpdateParams: [2]});
    TweenMax.to(scores.score3, speed, {score: scores.score3.end, onUpdate: updateHandler, onUpdateParams: [3]});
  }
});

function updateHandler(index) {
  let numberBlock = document.querySelector('.col[data-target="' + index  + '"] div');
  numberBlock.innerHTML = scores[`score${index}`].score.toFixed(0);
}
#numbers {
  display: flex;
  justify-content: space-between;
}

.col {
  flex: 0 0 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<h2>Прокрутите страницу</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="numbers">
  <div class="col" data-target="1">
    <h3>Увеличение числа 1</h3>
    <div>0</div>
  </div>
  <div class="col" data-target="2">
    <h3>Увеличение числа 2</h3>
    <div>0</div>
  </div>
  <div class="col" data-target="3">
    <h3>Увеличение числа 3</h3>
    <div>0</div>
  </div>
</div>
<br>
<br>

Как то так выходит на скорую руку. Дальше сами уже думаю разберетесь.

4
  • @Leks дополнил ответ 7 июн 2019 в 3:19
  • @Leks TweenMax по сути можете вынести в функцию, переделать чуть логику и в цикле вызывать эту функцию для каждого элемента. 7 июн 2019 в 4:35
  • @Leks jquery даже не подключен (или вы путаете с js принципиально, или не так поняли что-то) 7 июн 2019 в 4:45
  • Давайте продолжим обсуждение в чате. 7 июн 2019 в 4:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.