Adding symbol after number animation

Site URL: https://www.monkeymole.co.uk

Hi there,

Coding novice here. I've taken some code from this forum and amended values/font etc to my preference, however I'm looking to add a symbol after one of the values.

It's currently "100" (weddings captured), and I'm wanting it to be "100+" (weddings captured)

Script is:

<p><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script> 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); } }); }); a = 1; } }); </script>
<div id="counter"> <div class="sqs-col sqs-col-4 counter-value" data-count="100" data-desc="Weddings captured">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="31" data-desc="Cameras owned">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="81044" data-desc="Canapes stolen">0</div> </div>
<style> .counter-value { font-size: 40px; line-height:2em; text-align:center; padding:17px 0; } .counter-value:after { content: attr(data-desc); display:block; font-size: 16px; line-height:1.2em; } </style></p>

Many thanks.

Try this updated code. Make a copy of your current code somewhere just in case.

<p>

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

    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 ( ),
                index : $this.index ( )
                
                } ).animate ( {
                
                  countNum: countTo
                  
                    }, {
                  duration: 2000,
                  easing: 'swing',
                  step: function() {
                      $this.text(Math.floor(this.countNum));
                  },
                  complete : function ( ) {
                  
                    let countNumText = this.countNum;
                    
                    if ( this.index == 0 ) countNumText += '+';
                    
                    $this.text ( countNumText );
                    
                    }
              });
          });
          
          a = 1;
      }
      
    });
    
  </script>

  <div id="counter">

    <div class="sqs-col sqs-col-4 counter-value" data-count="100" data-desc="Weddings captured">0</div>
    <div class="sqs-col sqs-col-4 counter-value" data-count="31" data-desc="Cameras owned">0</div>
    <div class="sqs-col sqs-col-4 counter-value" data-count="81044" data-desc="Canapes stolen">0</div>
  
    </div>

  <style>
  
    .counter-value {
    
      font-size: 40px;
      line-height: 2em;
      text-align: center;
      padding: 17px 0;
      
      }
      
    .counter-value:after {
    
      content: attr(data-desc);
      display: inline-block;
      font-size: 16px;
      line-height: 1.2em;
      
      }
      
    </style>
    
  </p>

Let us know how it goes.