jQuery 2

좌우로 움직이는 뱃지 애니메이션

좌우로 움직이는 뱃지 애니메이션(?)딱히 뭐라고 불러야 할지 모르겠어서 이렇게 제목을 적었다 회사에서 두가지 타입의 컨텐츠를 번갈아 가면서 보여줘야하는 페이지에 사용했던 애니메이션처음에 기획을 보고 좌절했지만 기획자님이 원하는 동작을 애프터이펙트로 만들어 보여주셔서 그나마 기획에 맞게 만들 수 있었다 css를 이용해서 만들었고 active클래스를 토글하는 방식으로 애니메이션을 줬다단점은, 두가지 타입만 보여줄 수 있다는....확장이 안되는 너무 큰 단점이 ㅠㅠ 실제 사이트에선 좌우로 한번씩 이동할 때마다 예제의 텍스트 영역에 odometer.js를 사용해서 숫자를 돌리는 애니메이션이 있고, 하단에 글이 써질 때마다 알림텍스트가 아래에서 위로 flip되는 애니메이션까지 들어있다 하지만 odometer.js..

웹공부/css 2018.07.26

모바일 화면 방향 체크

한달전쯤 설문조사 페이지 퍼블리싱을 진행했는데,기획에선 모바일 세로모드만 적용해도 좋다고 해서 가로모드는 전혀 고려하지 않고 만들었다하지만 팀장님이 가로모드에서 화면이 깨지지 않느냐 말씀하셔서 부랴부랴 가로모드 처리 방법을 찾았다 모바일 가로 화면 css를 억지로 맞추기보다 모바일 화면을 세로로 고정시키는 방법으로 하려고 했지만 스크립트를 찾아봤지만 찾지 못했다그래서 차선으로 화면을 가로로 돌렸을 땐 다른 화면을 보여주는 방법으로 수정하기로 결정. 구글링에서 찾은 코드는 함수형태가 아닌 제이쿼리 ready 안에 들어있는 스크립트였는데, 화면 방향을 전환할 땐 적용이 되었지만 가로모드에서 새로고침을 했을 땐 스크립트 적용이 안되어 함수로 만들고 ready 함수 안에도 넣어주었다 또 모바일에서만 사용해야하니..