로그인
회원가입
Loading...
Loading...

Board

게시판

라이브러리를 활용한 jQuery와 html5 애니메이션

jQuery & css3 애니메이션 강좌를 시작하면서

인사말



안녕하세요. 이번 jQuery 및 html5 애니메이션 강좌를 시작하는 개발자 윤덕만입니다.

웹개발자의 발목을 잡아왔던 구IE 의 굴레를 어느정도 벗어났지만, 우리는 새로운 변화에 적응 하지 못해 도태되는 많은 동종업체 종사자들과 업체들도 보아왔습니다. 본인 또한 웹화면 레이아웃을 테이블로 짜던 시절과 플래시의 부침과 css2, css3, 자바스크립트의 변화,jQuery, 모바일웹과 반응형 홈페이지, 모바일앱의 대부흥까지 쉼없는 변화의 파도속에 흔들리며 뒤쳐지지 않기 위해 안간힘을 쓰고 있습니다.

이 강좌는 그 변화의 파도를 어찌 어찌 넘기 위해 발버둥 치면서 획득한 나름의 노하우나 정보들을 전달하는 것이 목표이며, 저희가 수주하여 개발했던 홈페이지 및 저희 오고가웹에이전시 Ver.2에서 사용됐던 효과들을 어떻게 구현했으며 어떤 라이브러리들(자바스크립트,jQuery,css3등)을 어떻게 사용하였나를 주로 이야기합니다.

강좌의 수준은 jQuery, 자바스크립트, css2 및 css3, html5 에 대해 초보수준으로 공부하신분들이라면 어렵지 않게 따라오실수 있는 있을것입니다. 본인이 작성한 코드의 구성이 어설플수 있으니 효과의 구현에 집중하여 주시고, 혹여 좀더 나은 코딩이 되기 위한 조언이 있으시다면 답변으로 알려주시면 저나 이 강좌를 보시는 다른분들 모두에게 도움이 될것입니다.

목표 프로젝트중 ie9에서 작동을 보장해야 했던 시점이 있으며, 해당 프로젝트에서는 html5를 거의 쓰지 않고 jQuery를 사용하였습니다. 같은 화면을 jQuery가 아니라 html5를 이용하면 현재 최신 브라우저들에서 훨신 부드럽게 작동합니다. 최신 브라우저들이 html5 애니메이션에 gpu 가속이 가능하게 변경하였기 때문입니다. 브라우저의 gpu 가속 기능 도입 자체는 ie9 이였지만, ie9이 제공하는 css 사양이 독립 사양이라 추후 최신 브라우저들이 html5 기본 규격을 만족 시키기까지 css 코딩이 굉장히 지저분할때 이기도 합니다.

따라서 각 프로젝트별로 브라우저 제한(특히 ie 버전)이 다르며, 이는 당시 의뢰주의 요구사항이나 시대 상황상 해당 버전을 버릴수 없을때이므로 이를 참조하여 주십시오.


구현할 목표 - 프로젝트



1. directlybooking.com 메인 화면 효과 (사이트는 폐쇄됨, 링크는 오고가에이전시 페이지로 갑니다.)

2. http://www.spmed.kr/ 메인화면 슬라이드에 적용된 글자 애니메이션

3. http://candle1978.com/index.html 메인화면 글자 애니메이션, 스크롤시켜서 확인하세요.

4. 오고가에이전시 ver.2 메인화면 프리젠테이션



준비물



코딩을 위한 추천 에디터 : Notepad++ 말이 필요없는 대세 에디터, GPL 라이센스
결과 확인을 위한 브라우저 : 크롬

COMMENTS