Login
Count-Up

Count Up Prefix and Suffix find

20 Oct 2022

CountUp js function that find prefix and suffix of String and animate it properly
HTML
SCSS
PostCSS
JS 
                            <section class="expertise-count">
    <div class="cont">
        <div class="we__items">
            <div class="we__item ">
                <div class="we__item-box">
                    <p class="we__item-num counter">
                        <span class="expertise-count__counter" id="expertise-count-1">5-10</span>
                    </p>
                </div>

                <p class="we__item-text"></p>
            </div>
            <div class="we__item ">
                <div class="we__item-box">
                    <p class="we__item-num counter">
                        <span class="expertise-count__counter" id="expertise-count-2">80%</span>
                    </p>
                </div>

                <p class="we__item-text"></p>
            </div>
            <div class="we__item ">
                <div class="we__item-box">
                    <p class="we__item-num counter">
                        <span class="expertise-count__counter" id="expertise-count-3">5</span>
                    </p>
                </div>

                <p class="we__item-text"></p>
            </div>
        </div>
    </div>
</section>
                        
                            .we {
  position: relative;

  &__decor {
    position: absolute;
    left: 0px;
    top: -1px;
    width: 211px;
    height: 146px;
    background-color: #8ca3b3;
    clip-path: polygon(0 102%, 0 0, 100% 0);
  }

  &__box {
    display: flex;
    justify-content: space-around;
    margin-bottom: ac(136px, 70px);
  }

  &__box-wrapp {
    max-width: 645px;
    width: 100%;
    margin-right: 63px;

    a{
      margin-top: 13px;
    }
    p{
      margin-bottom: 13px;
      font-size: ac(17px, 15px);
      line-height: ac(32px, 23px);
    }
  }

  &__title {
    margin-top: 10px;
    margin-left: 35px;
  }

  &__items {
    display: flex;
    justify-content: space-between;
  }

  &__item {
    position: relative;
    max-width: ac(282px, 140px);
    min-height: ac(200px, 103px);
    width: 100%;
    padding-left: 10px;
    z-index: 2;

    &-text {
      font-size: ac(35px, 18px);
      margin-top: 21px;
    }

    &-num {
      font-size: ac(106px, 54px);
      font-family: 'arboria', sans-serif;
      font-weight: 500;
      line-height: 1;
      color: var(--spicy-pink);
    }
  }
}
                        
                            .we {
      position: relative;

      &__decor {
            position: absolute;
            left: 0px;
            top: -1px;
            width: 211px;
            height: 146px;
            background-color: #8ca3b3;
            clip-path: polygon(0 102%, 0 0, 100% 0);
      }

      &__box {
            display: flex;
            justify-content: space-around;
            margin-bottom: adaptive-calc(136px, 70px);
      }

      &__box-wrapp {
            max-width: 645px;
            width: 100%;
            margin-right: 63px;

            a{
                  margin-top: 13px;
            }
            p{
                  margin-bottom: 13px;
                  font-size: adaptive-calc(17px, 15px);
                  line-height: adaptive-calc(32px, 23px);
            }
      }

      &__title {
            margin-top: 10px;
            margin-left: 35px;
      }

      &__items {
            display: flex;
            justify-content: space-between;
      }

      &__item {
            position: relative;
            max-width: adaptive-calc(282px, 140px);
            min-height: adaptive-calc(200px, 103px);
            width: 100%;
            padding-left: 10px;
            z-index: 2;

            &-text {
                  font-size: adaptive-calc(35px, 18px);
                  margin-top: 21px;
            }

            &-num {
                  font-size: adaptive-calc(106px, 54px);
                  line-height: normal;
                  font-family: 'arboria', sans-serif;
                  font-weight: 500;
                  line-height: 1;
                  color: var(--spicy-pink);
            }
      }
}
                        
                            const expertiseSection = document.getElementsByClassName(`expertise-count`)[0];
    if (expertiseSection) {
        const countsArr = [...document.getElementsByClassName(`expertise-count__counter`)];
        const defaultOptions = {
            separator: '',
            enableScrollSpy: true,
            scrollSpyRunOnce: true,
        };

        countsArr.forEach(elem => {
            let html = elem.innerHTML;
            const number = html.match('\\d+')[0];
            let prefix = '';

            if (html.indexOf(number) > 0) {
                prefix = html.slice(0, html.indexOf(number));
                html = html.replace(prefix, '');
            }

            const suffix = html.replace(number, '');

            let optionsFromDataAttr = $(elem).data();
            for (const key in optionsFromDataAttr) {
                if (optionsFromDataAttr[key] === '') {
                    optionsFromDataAttr[key] = true;
                }
            }

            optionsFromDataAttr.prefix = prefix;
            optionsFromDataAttr.suffix = suffix;

            new CountUp(elem.id, number, Object.assign(Object.assign({}, defaultOptions), optionsFromDataAttr));
        })
    }
1