목록Web Study (12)
타쿠꺼
Fly-out 메뉴 1. 오른쪽 메뉴 박스의 경우 각 박스의 innerWidth 크기, 위치를 계산해서 설정해주면 됨.2. relative 형제요소들 사이에 absolute가 끼면, 순서에 따라 그 이후의 요소들부터 absolute의 영향력이 적용된다. 그 이전의 relative 형제들의 영향력은 계속 존재하여 absolute여도 위치속성이 없으면 형제요소들 다음 자리에 위치하게 된다. 마치 float: clear 속성처럼 행동하게 된다.
포토 갤러리 메뉴 1. isAnim boolean값을 이용해 애니메이션이 꼬이지 않게 다뤘다. 2. 이미지 주소값을 ajax로 얻어오고, jQuery로 이미지 엘리먼트 만든 뒤 attr에 src를 줌으로써 이미지를 로드시키고, 로드 이벤트리스너를 등록하여 로드가 완료되면 이미지 객체를 DOM에 append시켜 이미지를 보이게끔 처리했다.여기서 시행착오가 있었는데, 이미지 로드가 항상 일정하지가 않기 때문에 이미지의 순서가 일정치 않게 로드되어 append된다는 점이었다.그래서 이를 해결하기 위해 배열을 만들고 이미지 객체들을 차례로 저장한 뒤, 마지막 이미지 로드 이벤트리스너가 실행되면 배열에 있는 값들을 0부터 차례대로 append하게 했다.그런데 여기서 간과한게, 마지막 이미지 로드 이벤트 리스너를 ..
가로 스크롤 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 구버전은 사라질것이다.