У меня есть фрагмент кода, который начинает увеличиваться, когда пользователь прокручивает его. Код фрагмента не мой. Автор - Дэвид Рейс. Но это очень похоже на то, что делаю я.
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
a = 1;
}
});
.fake-div {
width: 100%;
height: 1280px;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fake-div">
</div>
<div id="counter">
<div class="counter-value" data-count="300">0</div>
<div class="counter-value" data-count="400">100</div>
<div class="counter-value" data-count="1500">200</div>
</div>
<div class="fake-div">
</div>
Но в конце концов, когда он закончится, я хочу, чтобы у них в конце был знак «+».
Например, я хотел бы, чтобы конечный результат выглядел как цифры ниже: 300+
400+
1500+