개발노예 코드와 일상

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

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

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

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

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

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

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

기본은 

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

딜레이와 순서를 위해서 

일단 순서 구성을짜고

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

    },1000,function(){

            다음 애니메이션들 -

    };

});

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

그리고 반복해야되니까

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

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

: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 => 순서에따른 하위 자식 스타일, ( 브라우저 버전타는경우도있는듯 )