모바일 레이아웃에서 많이 활용되는 히든 레이어와 버거 아이콘입니다.
보통 jquery 의 animate를 이용해서 슬라이드되는 방식을 사용하는데
웹브라우저에서 구동되는 경우
네이티브앱에서의 그것만큼 부드럽게 되지는 않습니다.
jQuery의 easing 플러그인을 사용하면 어느 정도 해소는 될 것 같습니다만
좀 더 무거워지는 단점이 있죠.
단순히 버거 아이콘의 히든 레이어를 펼치기 위해 무거운 소스를 사용할 필요는 없잖아요.
그래서 이 번에 소개해드릴 소스는 CSS3의 transition, animation을 활용하는 방법입니다.
Demo
http://ralrariralra.dothome.co.kr/slidemenu/
먼저 위 페이지는 펼쳤다 닫혔다 하는 소스입니다.
Demo
http://ralrariralra.dothome.co.kr/slidemenu02/
이번에 소스는 부드럽게 펼쳤다 닫혔다 합니다.
css3를 지원하는 모바일기기에선 transition을 활용하면 하드웨어 가속을 할 수 있어서
아주 부드럽게 에니메이션 효과를 낼 수 있습니다..
참조
http://blog.naver.com/zmvk3967/220462904481
http://www.sudadot.com/bbs/bbs.php?mode=view&mid=board_LyRgk0&id=389162
