웹킷 CSS 애니메이션으로 스타워즈 오프닝 크롤 구현하기

/*
막간을 이용해서 CSS 삽질~~ just for fun~~
나름 삽질한다고 했는데... 해서 만들었는데... 아무도 안쳐다보는 것 같아서... ㅠㅠ
결과 동영상을 짤방으로~~(웅장한 사운드 주의!!!!)
*/
 

웹킷 CSS 애니메이션으로 스타워즈 오프닝 크롤 구현하기

CSS3에는 자바스크립트의 도움없이 애니메이션 효과를 구현할 수 있는 방법이 추가되었다. 대표적인 것인 transition과 animation이다. transition은 간단한 전환 효과를 구현할 때 주로 사용되고, animation은 플래시와 유사한 키프레임 기반 애니메이션을 만들 때 사용된다.

21세기, 머나 먼 은하계 저 멀리... IE6가 세계에서 두번째로 많은 대한민국의에서 HTML5와 CSS3의 멋진 기능들이 그림의 떡일 뿐이라고 생각하던 시절이 있었지만...

우리에겐 모바일 웹이 있다! 스마트폰, 태블릿등의 모바일 단말의 브라우져는 거의 대부분이 웹킷 기반이다. 그리고 그 숫자는 기존의 PC 숫자보다 훠~ㄹ씬 많다. 적어도 모바일 웹에서만큼은 마음놓고 HTML5와 CSS3를 써도 된다!!고 말하고 싶지만... -_- 구글의 크롬은 아직 3차원 변형을 지원하지 않는다. OTL

각설하고, 이 글에서는 웹킷의 CSS 애니메이션, 정확히는 -webkit-animation과 -webkit-keyframes, -webkit-transform, -webkit-perspective 등을 활용해서 스타워즈의 오프닝 크롤을 구현해 보려고 한다.

백문이 불여일견! 소스부터 보자!
먼저, 롱~ 타임 어고 파 파~ㄹ어웨이 어쩌고 하는 부분이다.

#galaxy {  display:block;  position:absolute;  left:0;  top:50%;  width:100%;  height:3em;  color:#06f;  font-size:1.5em;  margin-top:-1.5em;  text-align:center;;  vertical-align:middle;  opacity:0;  -webkit-animation-name:starwars_galaxy;  -webkit-animation-duration:3s;  -webkit-animation-timing-function:linear; } @-webkit-keyframes starwars_galaxy {  from {    opacity:1;  }  50% {    opacity:1;  }  to {    opacity:0;  } }

-webkit-animation-name:<애니메이션_식별자> 은, 노드가 표시될때 지정한 애니메이션을 수행하라는 의미다. 구체적인 애니메이션 내용은 @-webkit-keyframes <애니메이션_식별자> { … } 형식으로 정의한다. 애니메이션에서 핵심이 되는 프레임은 from(혹은 0%)에서 to (혹은 100%)까지 순차적으로 애니메이션을 수행되며, 중간 과정은 (플래시의 in-between과 비슷한 원리로) 자동으로 만들어진다.  -webkit-animation-duration:<재생시간> 은 지정한 애니메이션 전체를 재생하는 시간이다. -webkit-animation-timing-function:<타이밍함수> 은 시간이 점점 빠르게 혹은 느리게 가는 등의 효과를 지정한다. -webkit-animation-delay:<지연시간> 은 애니메이션이 시작되기 전까지의 지연 시간을 지정한다.
위의 예는, 시작하면(from) 화면에 #galaxy 레이어의 표시(opacity:1)하고, 1.5초(50%)이후 부터 투명도를 조절하기 시작해서(opacity:1) 마지막(to)에는 화면에서 사라지는(opacity:0) 애니메이션이다.

다음으로, STAR WARS라는 아웃라인 로고가 익스트림 클로즈업에서 빠르게 멀어지는 장면이다.

#title {  position:absolute;  display:block;  left:-400%;  top:30%;  width:900%;  height:100%;  color:transparent;  font-size:10em;  -webkit-text-stroke-width:0.05em;  -webkit-text-stroke-color:#ff3;/*XXX: this will not animated! :'( */  text-align:center;  white-space:nowrap;  overflow:hidden;  opacity:0;  -webkit-animation-name:starwars_title;  -webkit-animation-duration:7s;  -webkit-animation-timing-function:ease-in-out;  -webkit-animation-delay:3s; } @-webkit-keyframes starwars_title {  from {    font-size:1000em;    opacity:1;  }  90% {    font-size:0;    opacity:1;  }  to {    font-size:0;    opacity:0;  } } #title > p {  font-family:'Orbitron',sans-serif;  font-weight:900; }

좀 더 복잡해보이지만 기본적으로는 동일하다. 타이밍 함수를 easy-in-out으로 지정해서 애니메이션의 시작과 끝은 빠르고 중간은 천친히 진행되도록 지정한 것, -webkit-text-storke 으로 텍스트의 윤곽선을 표시하는 것, 웹 폰트를 활용하는 것 정도가 특이한 부분이다.

마지막으로, 프롤로그가 스크롤되어 올라가는 부분이다.

#crawl {  position:absolute;  left:20%;  top:40%;  width:60%;  height:60%;  white-space:pre;  -webkit-perspective:5em;  -webkit-perspective-origin:50% 0%; } #crawl > div {  position:absolute;  top:0;  left:0;  width:100%;  height:100%;  overflow:hidden;  -webkit-transform:rotateX(45deg); } #crawl > div > div {  position:absolute;  top:0;  width:100%;  margin:0;  padding:0;  color:#fc0;  font-size:1.2em;  font-style:italic;  text-align:center;/*XXX: text-align:justify;text-justify:inter-word;*/  letter-spacing:0.2em;  opacity:0;  -webkit-animation-name:starwars_crawl;  -webkit-animation-duration:40s;  -webkit-animation-timing-function:linear;  -webkit-animation-delay:10s; } @-webkit-keyframes starwars_crawl {  from {    top:50%;    opacity:1;  }  to {    opacity:1;    top:-100%;  } }

-webkit-perspective:<투영된_상단_너비> 는 2차원 평면을 원근법에 따른 3차원으로 투영할 때 상단의 너비를 지정한다. 하단의 너비는 이에 맞게 늘어나거나 줄어든다. -webkit-perspective-origin:<소실점_가로_위치> <소실점_세로_위치> 은 3차원 투영의 기준이 기준이 되는 위치(소실점)를 2차원 평면을 기준으로 지정한다. perspective는 머리 속으로 상상하기가 쉽지 않으므로 임시로 background/border 등을 설정해서 투영 전과 투영 후에 영역을 확인하는 것이 편하다.
위의 예는, 가로 60% 세로 60% 너비의 2차원 평면을 상단 가운데(50% 0%)가 다섯글자 너비(5em)인 3차원 평면(하단은 이에 맞춰 늘어나므로 밑변이 넓은 사다리꼴이 만들어진다)을  만든다. 애니메이션 자체는 단순하다. 10초동안 기다렸다가 40초에 걸쳐서 상단 좌표(top)을 50%(화면 아래에서) 위치에서 -100% 위치(화면 위로 텍스트들이 다 사라질 때까지)로 바꾸는 애니메이션이다. 이 과정이 3차원으로 변형된 평면 위에서 애니메이션되면 꽤 그럴 듯하게 보인다.

백견이 불여일RUN! 결과를 “눈"과 “귀”로 확인하자! 안타깝지만, 데스크탑용 사파리에서만 제대로 확인할 수 있다. 꽤 웅장한 사운드가 나오니 조용한 곳에선 주의 요망!!

http://jsbin.com/opoho4

아이폰이나 아이패드에서도 되어야겠지만, 마지막 자막이 올라가는 부분이 의도한대로 동작하지 않았는데, 화면을 톡톡 탭하면 정상적으로 자막이 올라가는 걸로 봐선 버그인 듯... 이 부분에 대해 명쾌한 해결책을 알려주시는 분에게 보라매 공원 반경 1km이내에서 별다방급 커피 1회 빌붙기 허용권을 증정하겠다. -_-;

사파리 깔기 싫다는 분들을 위해서 유투브 동영상도 준비했다 -.-v 역시나, 꽤 웅장한 사운드가 나오니 조용한 곳에선 주의 요망!!

http://www.youtube.com/watch?v=ml9pNaORYME

이 글에서는 웹킷이 제공하는 CSS 애니메이션을 이용해서 스타워즈의 오프닝 크롤을 구현해보았다. 이미지와 자바스크립트를 조금 쓰면 훨씬 더 그럴듯한 결과를 만들 수도 있겠지만, 웹앱과 CSS의 가능성을 보여준다는 의미에서 의도적으로 사용하지 않았다.

“하이브리드 모바일 웹앱”이라는 생소한 용어를 떠들고 다니다 보니, “네이티브로 하면 훨씬 더 쉽게 빠르게 만들 수 있는데 왜 웹으로 할려구 그러지?” 라는 얘기를 많이 듣는다. 반은 맞고 반은 틀린 얘기다. 웹으로 모든 걸 다할 순 없다. 그러나 우리가 일상적으로 접하는 앱의 90%는 웹으로도 충분히 만들 수 있다. 그리고 대부분의 경우에는 더 쉽다. 설령 조금 더 어렵다고 하더라도 그렇게 만들어두면 (아직은 좀 먼 얘기지만) 웹브라우져만 있는 환경이라면 어디에서라도 접근할 수 있다.

참고자료:
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html
http://www.gesteves.com/experiments/starwars.html
http://www.youtube.com/watch?v=P9kMh04GooE