타쿠꺼

가로 스크롤 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"가 먹히지 않는다.

z축 스크롤 1. body의 높이를 적당히 크게 설정한다.2. translateZ와 perspective를 이용하여 position: absolute로 한곳에 여러개를 배치한다.3. 스크롤에 따라 동적으로 translateZ의 크기를 각각 변화시킨다.

네비게이션 만들기 1. 스크립트 animate 사용을 지양하였다.2. css 트랜지션을 이용하여 스크립트로는 클래스를 주고, 빼면서 자연스럽게 트렌지션으로 애니메이션 효과를 줬다.3. setTimeout으로 메뉴를 마구 눌렀을 때, 겹치는 현상을 방지하였다. 크로스 브라우저를 위해선 animate 사용을 해야겠지만.. 어차피 몇년 뒤면 IE 구버전은 사라질것이다.

아코디언 메뉴. background-position을 특정지어 놓고 펼치게 한다.float: right으로 설정하면 오른쪽에서 왼쪽으로 펼쳐지는 효과.

메뉴를 누르면 해당 메뉴의 본문이 내려오는 효과 1. animate로 효과를 줄 땐 css transition효과는 빼야 한다. (반대도 마찬가지)2. HTML에서 article 배경은 고정되어 있기 때문에, article을 전부 만들지 말고 div로 나눠서 배경은 하나로 만드는게 좋을 것 같다.3. jquery 체이닝할 때, 코드의 순서에 신경을 써야 한다. 특히 콜백을 부를 때, 변수의 변화를 신경을 잘 써야함.4. 왠지 모르겠지만, 지금까지 animate는 하나의 요소에만 먹히는줄 알았다. 그게 아님.. 모든 요소가 다 먹힘.. each로 쓸 필요 없음..5. 따라서 사실상 article의 on 클래스로 활성화인걸 굳이 나눌 필요가 없는듯 하다. 원래는 이전에 나와있던 요소를 구분하기 위해 on 클..

상단 네비게이션 바 만들기 1. delay += 100 구문을 통해 each가 하나씩 돌 때마다 delay의 값을 100씩 증가시킨다.2. 스크립트로 hover 애니메이션을 구현할 수도 있지만, 구현할 수 있다면 css를 이용하는게 좋다. (속도면에서)3. css에서 margin-top에 !important가 있는 이유는, html이 로드되면 스크립트가 인라인스타일로 margin-top값을 주기 때문에 우선순위에 의하여 인라인스타일이 더 높아서 hover의 css가 먹히지 않기 때문이다. 따라서 !important로 우선순위를 높여준다.