[HTML+CSS] slide 애니메이션있는 사이드메뉴 효과내기

사이드의 메뉴를 열었다, 닫았다 하는 예제입니다.

 

See the Pen side slide 효과 by limqo (@limqo) on CodePen.

 

1. 먼저 메뉴부분과 버튼부분으로 영역을 잡아주고, 적절한 위치에 배치를 해줍니다.

 

2. animate(이동방향거리, delay); 를 이용하여 화면 밖의 영역으로 div를 이동해 줍니다.

 

3. toggleClass를 이용하여 메뉴의 상태와 화살표 방향을 변경해 줍니다.

 

생각보다 간단하면서 있어보이는(?) 효과를 나태낼수 있고, 디자인적으로 좀더 신경을 쓴다면 훌륭한 연출을 할 수 있을 것 입니다.