개발노예 코드와 일상

오랜만에 코드 글을쓴다

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

숫자를 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 이라고 다시 감싸주고

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

:hover = 마우스 오버했을시 javscript보다 자연스럽고 편함 , 

:after = 안에 내용물을 float시켰을때 따로 높이값 안주고 구간잡을때

- ex) .list_wrap:after { display:block; visibility:hidden; clear:both; content:"" }

animation  => 애니메이션, 간단한 애니메이션 작업해줄때사용 (복잡해지면 부자연스러움)

.box {animation:animate_background 3s linear;}

@keyframes animate_background {

 0% {margin-top:0px}

 100% {margin-top:0}

}

:focus, :active = > 보통 a링크 클릭할때, 활성화되있을때

a:focus, a:active {color:#fff}

:first-child, :last-child => 순서에따른 하위 자식 스타일, ( 브라우저 버전타는경우도있는듯 )