transform 썸네일형 리스트형 css - transition(icon) 이번에 만들어본건 금방 만들주 알았는데... 거의 하루종일 시간이 들어갔다... 모바일에서 많이보이는 햄버그 메뉴(3자 바)를 눌렀을때 X모양으로 변하는걸 많이 봤는데 svg가 아닌 그냥 css,animate로 움직이는것도 있길래 괜찬다 생각이 들어서 만들어보기로 했다. 처음에는 animate로 rotate를 주면될주 알고 했는데... rotate라는 속성은 없더라 그래서 구글링 시작... 찾아보니깐 transform으로 rotate하던지 아니면 jQuery패치? 를 해야 가능한거같더라...젠장 그래서 또 계속 검색하다가 새벽2시쯤... 하코사의 힘을 받아서 도움을 청했다. 햄버그에서 X로 만드는건 해결했는데 X를 햄버그로 다시 만드는데 또 문제 봉착... 각각 이벤트 사이에 딜레이를 줄라니깐 골이아프다.. 더보기 반응형 웹 (Responsive Web) - test3 test2에서 생각했던것 보다 잘 안되서 다시 생각 좀 해보았다. test2보다는 좀더 간단하게 구조를 해보았다. 기본 CSS를 설정 512px 사이즈일때 CSS를 변경해서 넣어준다. 반응형 웹은 모바일 기기를 위해 제작하는 경우가 많은데 transform:translate3d를 이용하면 좀더 기기에 부담을 덜 줄 수 있고 약간이나마 좀 더 부드러운 움직임을 구현할 수 있다. translate3d는 좀 어려운 부분이라 따로 연구좀 해봐야 되는 부분이다. 나중에 기회가 되면 따로 다뤄봐야 겠다. 자바스크립트를 넣어주는데 ham클릭시 menu-wrap에 addClass로 menu-on 클라스를 추가해준다. ham-wrap은 메뉴가 나왔을시 그 외에 부분은 어둠게 처리해서 메뉴에 집중시켜주는 효과를 넣어준다... 더보기 이전 1 다음
