Hallo zusammen, ich kenne mich leider nicht gut mit Javascript aus. Ich habe ein Couter Script gefunden, welches gut funktioniert. Erst beim Scrollen wird der Counter aktiv, wenn er sich z.B. unten auf einer Seite befindet. Da ich nun sehr große Zahlen habe, wie z.B. 278397, würde ich gern Dezimalzahlen nutzen. Leider funktioniert es nicht, einfach nur den Punkt zu setzen.
Könnt Ihr mir hier bitte helfen, das Script so anzupassen, dass im Counter Dezimalzahlen angezeigt werden? Ich danke Euch schon mal sehr im Voraus. Hier nun das Script:
HTML:
<div id="counter">
<div class="sectionClass" id="projectFacts">
<div class="fullWidth eight columns">
<div class="projectFactsWrap">
<div class="item" style="visibility: visible;">
<i class="fas fa-tools"></i>
<p id="number1" class="number counter-value" data-count="278397">1000</p>
<p>Number to count</p>
</div>
</div>
</div>
</div>
</div>
Javascript:
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: 4000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
a = 1;
}
});
Könnt Ihr mir hier bitte helfen, das Script so anzupassen, dass im Counter Dezimalzahlen angezeigt werden? Ich danke Euch schon mal sehr im Voraus. Hier nun das Script:
HTML:
<div id="counter">
<div class="sectionClass" id="projectFacts">
<div class="fullWidth eight columns">
<div class="projectFactsWrap">
<div class="item" style="visibility: visible;">
<i class="fas fa-tools"></i>
<p id="number1" class="number counter-value" data-count="278397">1000</p>
<p>Number to count</p>
</div>
</div>
</div>
</div>
</div>
Javascript:
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: 4000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
a = 1;
}
});