타쿠꺼
가로 스크롤 1. animate 속성에 scrollLeft, scrollTop 속성을 이용해서 스크롤할 수 있다. 2. 보통 스크롤 할 때에 $("html, body") 많이 쓰는 것 같다.
흩날리는 박스 만들기 1. 애니메이션 중일 때에는 버튼 동작 안하게 is(:animated) 사용했다.2. 배열에 원소 넣기 push()
이미지 네비게이터 만들기 1. 스크롤바를 사용할 경우, HTML구조와 CSS에 신경을 써야 한다.2. 안보이는 곳에서 보이는 곳으로 애니메이션 되면서 동시에 fade를 주니까 깜빡이는 현상이 있더라.. 이유는 모르겠음.3. 원래 중복되는 코드는 함수를 따로 만들어서 사용하는게 매우 효율적임. 여기에서는 좌,우 이동이 중복되기 때문에 함수로 만들면 됨.4. load 이벤트를 사용할 때 주의할 점은, load의 콜백메서드는 load가 완료된 후 불린다는 것. 그래서 load로 체이닝 하는 경우엔 load 뒤에 붙은 jquery메서드들이 당연하게도 load콜백보다 먼저 실행된다는 점을 잊으면 안됨.5. fadein,out에도 콜백메서드 붙일 수 있음. jquery의 이펙트들은 전부 콜백메서드 붙일 수 있음.6..
마우스포인터 위치에 따른 자동스크롤 1. 마우스포인터 위치에 따른 scrollTop을 계산하는 수식을 잘 기억해둬야 한다.wrap과 thumb의 보이는 부분이 겹쳐있기 때문에, (thumb - wrap)과의 비율로 계산을 해야한다.여기서 마우스포인터가 끝쪽에 있어야 전부 스크롤되는건 보기 불편하기 때문에, 약간의 여유를 줘서 어느정도 끝쪽에 다다르면 스크롤이 전부 되도록 하기 위해서 inactiveMargin이라는 값을 주었다.이 값의 2배를 thumb 크기에 합치고(위, 아래) 포인터 위치에 따른 스크롤바 위치를 결정지을 때 이 값만큼 빼줘서 구현하였다.2. visibility 속성은 부모가 hidden이여도 자식이 visible이면 보인다.
슬라이드메뉴 만들기 1. 커서가 있던 위치에 따라 슬라이드 되는 방향이 바뀐다. 2. background-position을 이용해 3분할을 한다.3. 이미지크기가 800px인데 각 슬라이드 화면의 크기는 265px + border-right 1px = 266px이다.그리고 마지막 슬라이드는 border-right가 없으므로 컨테이너의 width는 797px이다.4. animate로 background-position을 사용할 때에는 position-x, position-y를 나눠서 하자."background-position": "~px ~px"가 먹히지 않는다.