0
0
0




https://stackoverflow.com/questions/45767282/combining-2-different-countup-codes-to-create-a-specific-outcome

https://styleddigital.com/blog/2017/5/10/how-to-add-an-animated-counter-in-squarespace





colleen and ted co profile.jpg
0
0
0

Write here…

0
0
0
0

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

var a = 0;

$(window).on('load', 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: 5000,

easing: 'swing',

step: function() {

$this.text(Math.floor(this.countNum));

},

complete: function() {

$this.text(this.countNum);

}

});

});

a = 1;

}

});

</script>

<div id="counter">

<div class="sqs-col sqs-col-4 counter-value" data-count="2100000" data-desc="Pounds of Carbon Offset">0</div>

<div class="sqs-col sqs-col-4 counter-value" data-count="38" data-desc="Climate Plans">0</div>

<div class="sqs-col sqs-col-4 counter-value" data-count="320" data-desc="Renewable Energy Assessments">0</div>

</div>

<style>

.counter-value {

font-size: 60px;

line-height:1.2em;

text-align:center;

padding:2px 0;

}

.counter-value:after {

content: attr(data-desc);

display:block;

text-transform:uppercase;

font-size: 16px;

line-height:1.5em;

}

</style>