Jump to content

Code for Number Counter (Solved)

Go to solution Solved by deedee2344,

Recommended Posts

Client wanted number counters to showcase impact, but I had difficulty finding one that is:

(a) free
(b) simple to implement
(c) responsive
(d) easily customizable (add image, set animation duration, set animation on scroll/load, etc.), and
(e) could easily accommodate different prefixes and suffixes for each number (for this last one, I found that lots of plugins are limited or inflexible in this sense).

Ghost plugins has a paid number counter and, I bought it, only to find out that I need to create a blog page and use summary blocks, which are limiting creatively, and only lets me set either a prefix or suffix for all (I can't pick and choose for each number). Super annoying.

So, after some searching, I found this code: https://nicepage.com/qt/41839/counter-synergy-design-squarespace-template. It's a bit of a hack, but it ended up working great and I wanted to share for anyone who's also looking. What I love about this one is that I can easily type "50%" or "49 Families" or "$7000" and the number counter will still work with any prefixes, suffixes, or other text that I add.

See comments below for steps/code and gifs.

Edited by deedee2344
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

1. Download the file package from: https://nicepage.com/qt/41839/counter-synergy-design-squarespace-template

2. Upload only nicepage.js into Squarespace. (Create a text link. Link the text to a file. Upload nicepage.js file. Delete the link. File is now uploaded to Squarespace's backend.) Note: This is where it's a bit of a hack bc I'm not well-versed in Javascript, so I just uploaded the entire .js file without editing. Others more knowledgeable might want to edit the .js file to only include the number counter code bit to cut down on webpage load times.

3. Under Settings > Advanced > Code Injection > Header, paste the following code:

<!-- Installing Number Counter -->
<script class="u-script" type="text/javascript" src="/s/nicepage.js" defer></script>

4. This is the HTML for one number. Add as a code block, which Squarespace will naturally make responsive if multiple code blocks/numbers are added in a row.

Note:

  • I love how I can just add any additional text in front of or after the number and the number counter will still work. See attached screenshots.
  • Numbers are set to animate on "scroll," and animation duration is set to 3000, both of which can be further customized if need-be.
<section id="carousel_9139">
  <div style="text-align: center">
    <!--Replace img link here--><img src="/s/counter1.png" alt="">
    <h1 data-animation-name="counter" data-animation-event="scroll" data-animation-duration="3000" style="margin-top: 0; margin-bottom: 0;">
      <!--Edit number here-->1,255 Customers
    </h1>
    <p class="sqsrte-large">
      <!--Edit copy here-->Served Annually Through Education Programs 
    </p>
  </div>
</section>

See attached video to see how it looks on two pages on my site:

image.png

image.png

Link to comment
  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.