animation 한 번만 작동하게 하기

▏함수를 이용하여 작동

/*
progress마다 각각 할일
변수명 bar에 각요소의 .bar,
변수명 rate에 각요소의 .rate,
변수명 rateNum 각 요소의 data-rate의 값을 할당

변수명 progressOST에는 클래스명 progress가 상단에서 떨어진 거리 - 500

윈도우 스크롤이 생기면 할 일
스크롤양이 progressOST보다 많다면 애니메이션 시작
*/
let progressBar = $('.progress-bar');
let progressOST = $('.progress').offset().top - 500;

function startAnimation(){
progressBar.each(function(){
    let bar = $(this).find('.bar'),
        rate = $(this).find('.rate'),
        rateNum = rate.attr('data-rate');
        
    bar.animate({width:rateNum+'%'}, 1500);
  
    $({num:0}).animate({num:rateNum},{
      duration:1500,
      progress:function(){
        let now = Math.ceil(this.num);
        rate.text(now+'%');
      }
    });
  });
  $('.progress').addClass('active');
}

$(window).scroll(function(){
    if($(this).scrollTop() >= progressOST){
        if(!$('.progress').hasClass('active')){
            startAnimation();
        }
    }
})

 

▏변수 active 지정

let progressBar = $('.progress-bar');
let progressOST = $('.progress').offset().top - 500;
let active = false;

function startAnimation(){

    progressBar.each(function(){
        let bar = $(this).find('.bar'),
            rate = $(this).find('.rate'),
            rateNum = rate.attr('data-rate');
        
        bar.animate({width:rateNum+'%'}, 1500);
      
        $({num:0}).animate({num:rateNum},{
          duration:1500,
          progress:function(){
            let now = Math.ceil(this.num);
            rate.text(now+'%');
          }
        });
      });
      active = true;
    }
    
    $(window).scroll(function(){
        if($(this).scrollTop() >= progressOST){
            // if(!active==false)
            if(!active){
                startAnimation();
                }
        }
    });

 

▏문자열 -> 배열 & 배열 - > 문자열

// 문자열을 배열로 쪼개는 법
$('.star-wrap:lt(3)')
let str = '3.5.6.6.6'
let newarr = str.split('.');

// 배열을 문자열로 합치는 법
[3,5] -> '3/5'
newarr.join('/')