CSS 애니메이션 작업 후기

어쩌다 CSS 애니메이션 작업을 할 기회가 생겨 눈여겨 보고 있던 Adobe Egde 를 사용하게 되었다. 영상 편집툴 중 Apple 의 Motion 과 비슷한 인터페이스를 가지고 있다. 키프레임 애니메이션이 가능한 툴들은 거의 이런 스타일이다. 물론 Adobe 의 AfterEffect 도 이런 스타일이다.

결론부터 얘기 하자면 간단한 애니메이션에는 좋은 솔루션이 될 것 같다. 전제조건은 CSS3 를 지원하는 브라우저에서만 가능하다는 것이겠지만...

작업하면서 사용했던 꼼수와 그 코드를 기록해본다.

우선 클라이언트님의 서버가 ASP 환경이다. 기억에도 없는 코드들이지만 구글링을 통해 해결한다. 뭐든 안그렇겠냐...

브라우저 체크를 위해 토큰을 추출하는 코드는 아래와 같다. IE 를 제외하고 모두 CSS 애니메이션을 지원한다는 전제로 작성했다

' IE 인지 아닌지 구분하여 처리

dim flag, chk

'Request.ServerVariables("HTTP_USER_AGENT")

flag = Request.ServerVariables("HTTP_USER_AGENT")

chk = Instr(flag,"MSIE")

' "MSIE"

'Response.Write(flag)

'Response.Write chk

'Response.End

if chk > 0 then

server.execute("flash.asp")

else

server.execute("noflash.asp")

end if

CSS 애니메이션을 준비하는 과정은 아래와 같다.

애니메이션이 담길 파일을 준비한다.
애니메이션을 제외한 모든 코딩을 완성한다.
엣지를 통해 애니메이션 파일을 생성한다.
엣지의 코드를 준비한 파일에 담는다

엣지는 jQuery 를 사용한다.

CSS3 지원이 가능한지 체크하기 위해 modernizr 를 사용했다. 그리고 이미지 프리로딩 스크립트를 구글링해 파일로 작성하여 임포트했다.

마우스 오버시 사용한 코드는 아래와 같다. 러프하게 작성한 코드라 부끄럽다. 더 팩토링할 시간도 없다.

$('#flash_wrap div.panelTop > p')
    .mouseover(function(e){
        if (Modernizr.cssgradients) flagNo = '/images/' + $(this).attr('class') + '.png';
        else flagNo = '/images/' + $(this).attr('class') + '_b.png';

infoNo = '/images/' + $(this).attr('class') + '_p.png';

position = $(this).position();

        $('#flash_wrap div.panelTop > div.infoPanel').fadeIn(50).append('<img src="' + infoNo +'" border="0" />');
        $('#mouseImg').append('<img src="' + flagNo +'" border="0" />').css({'top':position.top-($('#mouseImg').height()/2)-50, 'left':position.left-($('#mouseImg').width()/2)+12}).show();
    })
    .mouseout(function(){
        $('#mouseImg').hide().empty();
        $('#flash_wrap div.panelTop > div.infoPanel').empty().fadeOut(50);

});

플래쉬 페이지를 위한 작업에는 시간이 많이 소요되었다. 꼼수가 많았기 때문이다.

우선 플래쉬 애니메이션은 마우스 오버 체크를 위한 레이어 아래에서 작동해야한다. z-index 로 해결되지 않는 부분이 있기 때문에 iframe 꼼수를 사용해야한다. 어짜피 IE 를 위한 페이지이기 때문에 문제되지 않는다.

플래쉬를 임베딩하고 투명모드로 세팅한다. 투명모드는 wmode 플래그를 사용한다. 투명모드와 z-index 를 적용해도 마우스 오버를 위한 스크립트는 동작하지 않는다. 무조건 플래쉬 레이어가 상위에 존재하기 때문이다.

꼼수는 있다.

iframe 을 사용하는 방법이다.(http://blog.outsider.ne.kr/71)

아이프레임으로 불려진 페이지는 플래쉬보다 상위 레이어에서 작동이 가능하다. 기존에 작성해둔 플래쉬 애니메이션을 제외한 CSS 작업과 코드들을 모두 손봐야했다. 기준 위치가 달라졌기 때문인데 시간이 좀 소요되었다. 더불어 짜증도 추가...

아무튼 이너프레임으로 불려진 파일에 CSS 와 JS 코드를 손보게 되었다.

여차저차 완성...

CSS3 그라데이션 배경에 사용한 코드 (http://gradients.glrzad.com/)

#mouseImg {
    display:none;position:absolute;border:0px solid green;padding:10px;
    background-image: linear-gradient(bottom, rgb(193,194,192) 15%, rgb(244,247,247) 58%);
    background-image: -o-linear-gradient(bottom, rgb(193,194,192) 15%, rgb(244,247,247) 58%);
    background-image: -moz-linear-gradient(bottom, rgb(193,194,192) 15%, rgb(244,247,247) 58%);
    background-image: -webkit-linear-gradient(bottom, rgb(193,194,192) 15%, rgb(244,247,247) 58%);
    background-image: -ms-linear-gradient(bottom, rgb(193,194,192) 15%, rgb(244,247,247) 58%);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

처음 해보는 작업이라 삽질 좀 했다.

문제가 있다는 걸 뒤늦게 알았음...

IE 8 이하에서는 이너프레임 소스가 올라오면서 배경이 하얗게 떠버림... 아놔!
그리고 z-index 는 IE 를 제외하고 정상 작동을 하고 있는 현실... 정작 필요한 곳에는 작동하지 않는...

아 이래서 IE 개객기 하는거구나...

결론 : IE 에서 투명 플래쉬 위에서 마우스 이벤트 컨트롤은 불가능. 크롬에서는 z-index 처리로 가능

'Development > Coding' 카테고리의 다른 글

커피스크립트에 대한 아쉬움 (0)	2011.12.12
micro PHP framework 삽질기 (0)	2011.12.06
유능한 C# 개발자가 착각하는 나쁜 자바스크립트 습관. Part 3 (2)	2011.06.30
유능한 C# 개발자가 착각하는 나쁜 자바스크립트 습관. Part 2 (0)	2011.06.30
유능한 C# 개발자가 착각하는 나쁜 자바스크립트 습관. Part 1 (0)	2011.06.30

Fault Note

CSS 애니메이션 작업 후기

'Development > Coding' 카테고리의 다른 글

티스토리툴바

CSS 애니메이션 작업 후기

'Development > Coding' 카테고리의 다른 글

'Development/Coding' Related Articles

티스토리툴바