Jump to content

Need help with some javascript code.

Recommended Posts

Hello,

I would like to edit the following Javascript code to start automatically, when somebody lands on my page. The code is for a simple counter from https://styleddigital.com/blog/2017/5/10/how-to-add-an-animated-counter-in-squarespace. Unfortunately this question has not yet been answered there. Maybe you can help?

Quote

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
var a = 0;
$(window)(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);
          }
        });
    });
    a = 1;
  }
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-12 counter-value" data-count="47" data-desc="Zigarren bewertet">0</div>
</div>


<style>
 .counter-value { 
    font-size: 50px;
   line-height:1.4em;
   text-align:center;
   padding:18px 0;
 }
  .counter-value:after {
   content: attr(data-desc);
    display:block;
    text-transform:uppercase;
    font-size: 20px;
    line-height:1.3em;
  }
</style>

 

 

Link to comment
  • Replies 1
  • Views 466
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.