Animated counter

Post all HTML related questions here. No support.

Moderator: Project members

Post Reply
Message
Author
Madsen
500 Command not understood
Posts: 2
Joined: 2020-02-23 04:42
First name: Soren
Last name: Madsen

Animated counter

#1 Post by Madsen » 2020-03-01 03:26

Greetings,

I am working on some code below on [a page]

How is it possible to style the fonts, for instance, to the blue color?


<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
const formatter = (Intl !== undefined)? new Intl.NumberFormat().format : (t) => t;
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(formatter(Math.floor(this.countNum)));
},
complete: function() {
$this.text(formatter(Number(this.countNum)));
}
});
});
a = 1;
}
});
</script>
<div id="counter">
<div class="sqs-col sqs-col-4 counter-value" data-count="162" data-desc="Online anbefalinger">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="15039" data-desc="Legater i databasen">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="6916682" data-desc="Legatsum til kunder">0</div>
</div>


<style>
.counter-value {
font-size: 60px;
line-height:2em;
text-align:center;
padding:17px 0;
}
.counter-value:after {
content: attr(data-desc);
display:block;
text-transform:uppercase;
font-size: 14px;
line-height:1.2em;
}
</style>
Last edited by botg on 2020-03-02 09:39, edited 1 time in total.
Reason: Redacted potential advertisement

User avatar
botg
Site Admin
Posts: 35508
Joined: 2004-02-23 20:49
First name: Tim
Last name: Kosse

Re: Animated counter

#2 Post by botg » 2020-03-02 09:40

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
See, this is your problem. You are including content from an external site. You should _NEVER EVER_ do that.

Post Reply