본문 바로가기
반응형

롤링배너3

[CSS3] 큐브처럼 돌아가는 배너 다음앱에 들어가면 메인메뉴가 큐브처럼 돌아가도록 되어있습니다. 다음앱처럼 돌아가는 큐브배너를 만들어봤습니다. 사용법이 조금 복잡해 보이지만 오브젝트 생성과정만 추가되었을 뿐입니다. 그리고 크롬과 사파리에서는 정상작동하지만 IE에서는 오작동합니다. v0.2 업데이트 drag이벤트를 mouse이벤트로 대체. v0.3 업데이트배너가 4개 이하일경우 롤링시 배너이미지를 가지고 오지 못하는 현상 수정 1. HTML 구성하기 1 2 3 4 5 ① : face는 고정된 이름의 클래스이름입니다. 바꾸면 플러그인 소스를 바꾸셔야합니다. 또한 개수가 4개고 그 이유는 사각형의 각 면을 의미하기 때문입니다. ② ... : 좌우버튼 영역입니다. ③ ... : 캐럿셀영역입니다. 배너의 갯수만큼 만들어주시면 됩니다. 배너갯수랑 .. 2014. 3. 21.
[jQuery] jQuery plugin 입니다. 이번에 새로 만든 jQuery 플러그인입니다. 순수 jQuery로 되어있습니다. ※ 특징 ① IE, Webkit, Mozila, Opera 호환 ② IE가 아닌 브라우저에서는 Transform으로 화면 전환 ③ 터치와 마우스로도 슬라이드 동작 ④ 슬라이드의 끝이 존재하지 않는 무한 롤링기능 ※ 보안이 필요한 점 ① 자동슬라이드 기능이 추가예정 - 슬라이드쇼 ② transform 동작 유형 추가예정 - 슬라이드밖에 구현되지 않음 , 큐브방식 구현을 시작으로 여러가지 구상중... ※ 개선사항 ① 버그수정 ② IE11버젼에서 transform 으로 배너구현 ※ 사용법 슬라이드 태그를 아래와 같이 만들고 순서대로 배너, 좌우버튼, 네비게이션(캐럿셀) 1 2 3 4 스크립트를 구성한다. 그러면 이렇게 만들어진다... 2014. 3. 18.
[jQuery] 슬라이더 배너 만드는 방법 구글에서 슬라이더 배너 플러그인을 찾아보면 셀수 없이 많은 소스들이 나온다. 하지만 정작 만들어 사용할 수 있는 사람은 소수인 것을 감안하면 만드는 법 하나정도는 정리해 둬도 괜찮다는 생각이 든다. 슬라이더 배너를 만들기 위해 아래 과정대로 작업을 진행하려고 한다. 1. HTML 및 Style 구조잡기2. 좌우버튼을 생성하여 배너 이동시키기 1. HTML 및 Style 구조 잡기 슬라이드 배너의 핵심은 주황, 노랑, 초록색 영역이다. HTML 삽입 미리보기할 수 없는 소스 초록색 영역은 들이 된다. 실제 노출될 배너들을 의미한다. 이미지들을 일렬로 나열하기 위해 float:left를 사용했고 넓이는 100px에 선을 1px씩 좌우로 넣어서 배너 하나당 넓이는 102px가 된다. 주황색 영역은 banner.. 2014. 3. 13.
반응형