'날개 배너'에 해당되는 글 5건

  1. 2009.08.16 [jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용) 5

[jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용)

업데이트 되었습니다
2009/09/21 - [웹 프로그래밍/JavaScript] - [jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴  (중앙정렬용) #2



이 배너는 브라우저의 스크롤을 움직이면 따라다니는 배너입니다.중앙정렬에 특히 쓰기 좋습니다. 그래서 만든거니까요

이 기능을 구현한 스크립트는 매우 많습니다. 멋진 기능을 제공하는 것들 도 많고요, 사실 저는 CSS로 구현된 것을 좋아 합니다. 좌측 정렬이라면 자바스크립트를 쓸 필요도 없습니다. 너무 부드러워서(?)모니터에 포스트잇 붙여 놓은 듯 한게 디자이너 분들에게는 좀 꺼려 지나보더군요. 한가지 더하자면 CSS에 IE6 때문에 expression을 사용해야 하는 문제가 있기도 했습니다. CPU를 비교적 많이 잡아먹거든요..

좌측정렬의 경우에는  많은 종류의 스크립트가 있습니다만, 중앙정렬용으로는 얼마되지 않고 그나마 있던것들도 쓸데없이 브라우저 검사를 한다거나..  heartBeat() 함수를 많이들  쓰시는데 -저도 그랬습니다.- 어딘가 모르게... 라기보다는 jQuery롤 만들어 보고 싶어서 였습니다.

다른경우는 너무 껄떡대는게 부드럽지 못해 외관상 좋지 못했습니다.

이런 계기로 주말에 할 일도 없고 해서 아래 스크립트를 만들어 봤습니다. 간단한 기능에 다소 길다 싶지만 IE6~IE8, 파이어 폭스, 크롬, 사파리, 오페라 모두 잘 동작합니다.
사용시 전제 조건으로 최신의 jQuery를 사용해야합니다. 사용자의 컴퓨터 사양에 따라 느려질 수 있습니다만 요즘 어지간한 컴퓨터 사양이면  느끼지도 못할 것 같습니다..


중앙정렬 때문에 넣은 코드 부분을  다시 만들고 싶지만 잘 동작 하는 관계로 그냥 둡니다만, 능력자분들께서는 알아서 고쳐 쓰시기 바랍니다.

어떤 용도로도 자유로운 사용가능. 수정/배포도 마음대로..
** 참고로 레이어로 돌릴 엘리먼트에 동작을 위해 따로 스타일을 줄 필요 없습니다.
08.20 // 변수등 소소한것들 수정.. 처음과 기능상 다른점 없음
Posted by TheBits