개발노예 코드와 일상

이번에는 메인에 애니메이션 효과를 주라는요청이있었다

보통 css로 대부분 처리해버렷는데

이번에는 css 만으로는 안될거같아서 javascript로 처리했다

안되는이유는 애니메이션 구성? 떄문이었는데

이미지가 계속줄어들고, 글자가 날라가고, 이게 계속 반복되고

하여튼 쪼금 귀찮았다 사실 많이

그렇게 복잡하진않았고 타이밍이나 순서 맞추는게 일이었다

기본은 

$(".test").delay(100).animate({ }); 이런느낌인데

딜레이와 순서를 위해서 

일단 순서 구성을짜고

$(".test").delay(100).animate({
        
        opacity:'1'

    },1000,function(){

            다음 애니메이션들 -

    };

});

이렇게 처음 animate 안에 코드를 넣고 그안에 또 넣고 이런식으로 했다

그리고 반복해야되니까

function _start(){} 으로 함수로만들어줬고

화면크기나 셋인터벌이나 이런 조건에따라 함수를 호출하도록 마지막 마무리

오랜만에 코드 글을쓴다

작업중에 애니메이션 요청이들어왔는데

숫자를 0~ ** 까지 올라가는 내용이었다

한두개면 그냥 수동으로 할텐데

수가 꽤 많아서 함수로 해두고 클래스명 통일해서 한번에 넣어버렸다

//스크롤 했을때 숫자 애니메이션이 동작하도록, 1회만 동작
//함수화 , 기능수정
var _once = 1;

    $(window).scroll( function(){
        var na_div = $(".now_wrap ").offset().top + 500;
        var _window = $(window).scrollTop() + $(window).height();


        if(na_div < _window && _once == 1){
            number_animation();

            _once = 2;
        }

    })

    function number_animation(){
        //숫자애니메이션
        $(".number_animation").each(function(index, element){
            var $this = $(this),
                goal_cnt = $this.text();

            $({ val : 0 }).animate({ val : goal_cnt }, {
                duration: 1000,
                step: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);

                },
                complete: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);
                }
            });
        })
    }
    function numberWithCommas(x) { //숫자콤마로 출력
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }  

    어우 줄바꿈 하기는 귀찮네
    일단 코드는 이렇게 되어있다

    목표 숫자를 일단 초기로 적어둔다

    .number_animation 으로 클래스를 통일해서 해당 div의 text값으로다가 목표로 해서 애니메이션을주었고


    이게 하다보니까 로드 하고 화면위치에 상관없이 애니메이션이 시작되서

    스크롤 내리면 밑에꺼는 끝나있더라
    그래서 .now_wrap 이라고 다시 감싸주고

    화면위치랑 해당 클래스 위치랑 비교해서 함수 실행하도록 설정했다