[jQuery] 백그라운드 영상과 애니메이션 구현하기

jQuery를 접한 지 아직 1년도 되지 않은 것 같은데 참 많은 걸 시도해 보고 있다. 지난 주에는 이번에 처음시도하는

백그라운드에 영상을 넣고 그 위에서 각 요소들의 애니메이션 되도록 하는 것을 만들었다. 혼자 애니메이션을 기획

한 것은 아니고 함께 일하는 디자이너의 시나리오를 바탕으로 jQuery와 다양한 jQuery 플러그인을 이용해서 구현을

시도했다. 쉽지 않은 작업일 것이라 생각했고 역시나 쉽게 끝나지는 않았다. 특히나 요소의 이동이 곡선이 되어야

하는데 이걸 구현하지 못해 한참 검색을 하고 많은 시간을 허비했다. 다행히 딱 좋은 플러그인이 찾아서 작업을 완료.

적용사이트 : http://www.smiths3.co.kr/

위 사이트 접속하면 구현된 애니메이션을 볼 수가 있다. 지금 내가 할 수 있는 최선의 기술을 모두 쓴 것 같다. ^^;

백그라운드 영상은 MediaElement.js 를 이용했다. 유튜브 영상을 백그라운드 영상으로 넣어주는 플러그인도 있는데

모바일 기기에서 문제가 있어.. 영상 위에 투명 레이어를 올려야 하는데 이럴 경우 재생 버튼을 클릭할 수 없는 문제가

있어 다른 것을 찾아봤지만 딱 마음에 드는 것은 없었고 그나마 MediaElement.js 제일 나은 것 같아 사용을 했다.

육각형 요소의 이동은 jQuery animate() 함수를 사용했고 setTimeout 메서드를 이용해 순차적으로 실행되도록 했다.

위 사이트에서 애니메이션 마지막에 의자가 좌우에서 곡선으로 나타나는 것이 있는데 이 부분은 jquery.path 를 이용

곡선으로 이동시켰다. 이걸 작업하면서 함수에 대한 공부를 다시 좀 해야겠다는 생각이 들었다. ^^; 지금 생각해보면

아쉬운 부분도 분명 있다. 하지만 그걸 다 하기에는 아직은 내 실력이 너무 부족해서 아쉬워만 하고 있다.

총 작업시간은 3일정도 소요된 것 같다. 디자인과 코딩, 애니메이션 구현까지 쉽지 않은 과정이었지만 이렇게 해놓고

보니 왠지 자랑스럽다. 이제 이런 애니메이션은 좀 더 쉽게 할 수 있을 것 같은 자신감이 생긴 게 가장 큰 소득이다.