Как выполнить js код в поле видимости браузера?

Question

Роман Байдаков @Dastem

Программист

JavaScript

Как выполнить js код в поле видимости браузера?

Всем привет, есть код:

$('.circle').circleProgress({
    value: 1,
    size: 100,
    fill: {
      gradient: [
        ['#b5b5b5', .5],
        ['#D3D3D3', .5]
      ],
      gradientAngle: Math.PI / 4
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(Math.round(parseInt(this.dataset.progress, 10) * progress));
  });

Этот код должен выполнятся, когда попадает в поле видимости человека в браузере, как это сделать? ВОт полный код страницы:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>


<style>
.circle {
  width: 100px;
  position: relative;
  text-align: center;
  font-family: sans-serif;
  color: #808080;
  display:inline-block;
  vertical-align: top;
  margin: 23px;
}

.circle strong {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  line-height: 40px;
  font-size: 40px;
}

.circle.span {
  display: block;
  margin-top: 12px;
}

.code {
 text-align: center;
}
</style>

</head>
<body>
<div class="block2">
<div class="circle" data-progress="24">
  <strong></strong>
  <span>Гарантия от 24 месяцев</span>
</div>
 
<div class="circle" data-progress="5">
  <strong></strong>
  <span>Пяти зональный подход к планировке</span>
</div>

<div class="circle" data-progress="21">
  <strong></strong>
  <span>Срок изготовления от 21 дня</span>
</div>

<div class="circle" data-progress="0">
  <strong></strong>
  <span>Бесплатный замер, доставка и сборка</span>
</div>

<div class="circle" data-progress="1265">
  <strong></strong>
  <span>Реализовано более 1265 проектов</span>
</div>

<div class="circle" data-js="circleProgress"  data-progress="100%">
  <strong></strong>
  <span>Официальный договор</span>
</div>

</div>

<script>
	$('.circle').circleProgress({
    value: 1,
    size: 100,
    fill: {
      gradient: [
        ['#b5b5b5', .5],
        ['#D3D3D3', .5]
      ],
      gradientAngle: Math.PI / 4
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(Math.round(parseInt(this.dataset.progress, 10) * progress));
  });
</script>



</body>
</html>

Лендинг делаю на https://platformalp.ru
перепробовал много вариантов, не помогает, может что-то сайту мешает не знаю.(

Вопрос задан более трёх лет назад
208 просмотров

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

Подписаться 1 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Роман Байдаков @Dastem Автор вопроса

Получилось так, но так даже анимация не срабатывает, или я что-то не так сделал?

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<script src="http://ironaddict.com.ua/jquery.viewport.js" type="text/javascript"></script>


<style>
.circle {
  width: 100px;
  position: relative;
  text-align: center;
  font-family: sans-serif;
  color: #808080;
  display:inline-block;
  vertical-align: top;
  margin: 23px;
}

.circle strong {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  line-height: 40px;
  font-size: 40px;
}

.circle.span {
  display: block;
  margin-top: 12px;
}

.code {
 text-align: center;
}
</style>

</head>
<body>
<div class="block2">
<div class="circle" data-progress="24">
  <strong></strong>
  <span>Гарантия от 24 месяцев</span>
</div>
 
<div class="circle" data-progress="5">
  <strong></strong>
  <span>Пяти зональный подход к планировке</span>
</div>

<div class="circle" data-progress="21">
  <strong></strong>
  <span>Срок изготовления от 21 дня</span>
</div>

<div class="circle" data-progress="0">
  <strong></strong>
  <span>Бесплатный замер, доставка и сборка</span>
</div>

<div class="circle" data-progress="1265">
  <strong></strong>
  <span>Реализовано более 1265 проектов</span>
</div>

<div class="circle" data-js="circleProgress"  data-progress="100%">
  <strong></strong>
  <span>Официальный договор</span>
</div>

</div>

<script>
$( ".some-element" ).viewportTrack( {
    "threshold": 0,
    "allowPartly": false,
    "forceViewport": false,
    "tracker": function( state ){

	$('.circle').circleProgress({
    value: 1,
    size: 100,
    fill: {
      gradient: [
        ['#b5b5b5', .5],
        ['#D3D3D3', .5]
      ],
      gradientAngle: Math.PI / 4
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(Math.round(parseInt(this.dataset.progress, 10) * progress));
  });
  
      },
    "checkOnInit": true
} );
</script>



</body>
</html>

Написано более трёх лет назад

Ваш ответ на вопрос