제이쿼리 소스를 아주 많이 개발하고 있는 사이트를 소개합니다. 무료로 사용할 수 있고 내용도 좋아서 제이쿼리를 이용한 웹페이지 개발하는데 많은 참고가 됩니다. 이곳 을 클릭하면 해당 사이트로 연결됩니다.
제이쿼리 튜토리얼과 웹디자인에 관한 많은 정보가 있으며 개발된 소스의 데모를 확인하고 다운받아 사용할 수가 있습니다.
이번 글에서는 이 사이트에서 만든 슬라이스 박스 플러그인을 이용해서 3D 이미지 갤러리나 배너를 만드는 방법을 알아봅니다. 현재 CSS3의 3D Transform을 지원하는 Webkit 플랫폼의 브라우저인 구글 크롬과 애플 사파리만 3D로 애니메이션 되고 다른 브라우저는 단순한 이미지 슬라이드만 가능합니다. 조만간 CSS3를 다 지원하는 버전이 나오게 되면 훌륭한 제이쿼리 소스로 각광을 받을 것입니다. 이곳 을 클릭하면 슬라이스박스 플러그인의 페이지로 이동합니다. 데모를 확인해보고 다운로드 버튼을 클릭하여 압축파일을 다운 받습니다.
<피스메이커2.0>
이 플러그인은 제 블로그의 타이틀에 사용된 피스메이커(Piecemaker)와 비슷하지만 피스메이커는 자바스트립트와 플래시로 작동되고 트위너 패러미터(Tweener Parameter) 를 사용하므로 아주 다양한 애니메이션이 가능합니다. 이 플러그인은 제이쿼리와 CSS에 의해서만 작동하기 때문에 애니메이션이 피스메이커에 비해 단순합니다. 피스메이커에 관한 글은 이곳 을 참고하세요.
압축파일을 풀면 위와같은 폴더와 파일이 있습니다. demo.css는 웹페이지의 전반적인 레이아웃을 담당하는 스타일시트이고 reset.css는 스타일의 모든 수치를 원상태로 돌리는 리셋 스타일시트인데 여기서는 사용되지 않습니다. slicebox.css는 이미지 슬라이스 부분의 스타일을 담당합니다.
이미지폴더에는 사용되는 이미지들이 있으며 js폴더에는 사용되는 제이쿼리 파일이 있습니다. easing 파일은 애니메이션의 자연스런 동작을 담당합니다. 애니메이션의 시작과 종료시에 부드러운 시작과 멈춤을 관리합니다. 이징은 자동차가 출발하거나 정지할때 급출발이나 급제동으로 정지하지 않는 자연스런 동작을 말합니다. slicebox 제이쿼리파일은 이미지의 슬라이스를 담당하고 두가지인데 하나는 코드의 간격(white space)이 있어서 보기 편하지만 용량이 min파일보다 약간 큽니다. min파일은 화이트스페이스를 없애서 용량을 줄인 파일입니다. modernizr파일은 웹브라우저가 신기술인 HTML5와 CSS3를 지원하는지를 파악해서 브라우저의 호환성을 높이기 위한 기능을 합니다. 제이쿼리 파일에 대해서는 자세히 알지못해도 되며 설정부분만 이해하면 됩니다. 인덱스파일중 하나를 클릭하면 다음과 같은 화면이 나옵니다.
여섯개의 파일을 다 클릭해도 같은 화면이 나오고 example의 선택이 달라집니다. 현재는 example6를 클릭해서 들어온 것입니다. 좌우에 있는 화살표는 이미지를 슬라이드해서 보는 버튼이고 하단의 플레이버튼은 애니메이션을 플레이하는 버튼입니다. 인포 아이콘은 이미지 하단에 메시지를 출력합니다. 여기서는 example6에 대해서 설명드리지만 다른 파일도 비슷한 내용입니다.
인덱스파일을 에디터에 열면 head태그에 스타일시트 파일과 모더나이저 자바스크립트파일이 링크로 추가되어있습니다. 2는 구글웹폰트를 사용하기 위해 링크를 한 것입니다.
이미지가 들어가는 div부분입니다. 위 div의 sb-slider 아이디에 대해서 슬라이스박스 제이쿼리가 통제를 하게 됩니다.
바로 밑에 제이쿼리 기본파일인 구글 제이쿼리 라이브러리가 링크로 포함되어있어서 별도의 제이쿼리 라이브러리를 파일폴더에 포함시키지 않았습니다. 구글의 제이쿼리 라이브러리를 사용하면 여러가지 잇점이 있습니다. 슬라이스박스 제이쿼리가 링크로 추가되어있고 이 슬라이스 박스 제이쿼리를 실행시키기 위한 코드가 이어서 나옵니다.
4는 슬라이스 조각의 숫자를 설정합니다. 5는 조각난 이미지가 같이 회전하는지를 설정합니다. false로 설정하면 조각난 이미지가 모두 같이 회전합니다. 6과 7의 숫자는 밀리초(mili second), 즉 1000분의 1초 단위입니다. 6은 조각난 이미지가 서로 회전하는 간격을 조절합니다. 7은 하나의 이미지가 회전하는 속도입니다. 위 수치를 다르게 하여 시험해보세요.
슬라이스 제이쿼리 파일(jquery.slicebox.js)을 에디터에 열고 66번째 줄이 보면 추가 설정부분이 있습니다. 설정을 시험하려면 링크 파일의 이름에서 .min을 제거해야 위 파일이 링크에 대체됩니다(이전 이미지에서 2번부분).
1의 오리엔테이션은 슬라이스의 방향을 결정합니다. 기본이 "v"로 되어있어서 세로로 슬라이스되지만 "h"로 바꾸면 아래 사진처럼 가로로 슬라이스됩니다.
2의 Perspective는 슬라이스의 원근을 조절합니다. 200으로 설정하니 다음 이미지처럼 나옵니다.
3의 슬라이스카운트는 홀수로 설정하는데 숫자를 변경해봐도 별다른 변화가 없네요.
4는 애니메이션 되면서 슬라이스의 간격을 설정합니다. 픽셀단위입니다.
5는 숨겨진 측면의 색상을 설정합니다.
6은 슬라이스가 연속적으로 애니메이션 되는 것을 설정합니다.
7은 슬라이스 사이의 속도를 조절합니다.
8은 3D애니메이션의 속도를 조절합니다.
9는 3D가 안되는 브라우저에서 슬라이드의 속도를 조절합니다.
10은 3D가 안되는 부라우저에서 이징 속도를 조절합니다.
11은 ture로 설정하면 자동으로 애니메이션 됩니다. false의 경우 버튼을 클릭해야만 애니메이션됩니다.
12는 이미지 슬라이드의 간격 시간을 조절합니다. 밀리초 단위입니다.
제이쿼리 튜토리얼과 웹디자인에 관한 많은 정보가 있으며 개발된 소스의 데모를 확인하고 다운받아 사용할 수가 있습니다.
이번 글에서는 이 사이트에서 만든 슬라이스 박스 플러그인을 이용해서 3D 이미지 갤러리나 배너를 만드는 방법을 알아봅니다. 현재 CSS3의 3D Transform을 지원하는 Webkit 플랫폼의 브라우저인 구글 크롬과 애플 사파리만 3D로 애니메이션 되고 다른 브라우저는 단순한 이미지 슬라이드만 가능합니다. 조만간 CSS3를 다 지원하는 버전이 나오게 되면 훌륭한 제이쿼리 소스로 각광을 받을 것입니다. 이곳 을 클릭하면 슬라이스박스 플러그인의 페이지로 이동합니다. 데모를 확인해보고 다운로드 버튼을 클릭하여 압축파일을 다운 받습니다.
이 플러그인은 제 블로그의 타이틀에 사용된 피스메이커(Piecemaker)와 비슷하지만 피스메이커는 자바스트립트와 플래시로 작동되고 트위너 패러미터(Tweener Parameter) 를 사용하므로 아주 다양한 애니메이션이 가능합니다. 이 플러그인은 제이쿼리와 CSS에 의해서만 작동하기 때문에 애니메이션이 피스메이커에 비해 단순합니다. 피스메이커에 관한 글은 이곳 을 참고하세요.
압축파일을 풀면 위와같은 폴더와 파일이 있습니다. demo.css는 웹페이지의 전반적인 레이아웃을 담당하는 스타일시트이고 reset.css는 스타일의 모든 수치를 원상태로 돌리는 리셋 스타일시트인데 여기서는 사용되지 않습니다. slicebox.css는 이미지 슬라이스 부분의 스타일을 담당합니다.
이미지폴더에는 사용되는 이미지들이 있으며 js폴더에는 사용되는 제이쿼리 파일이 있습니다. easing 파일은 애니메이션의 자연스런 동작을 담당합니다. 애니메이션의 시작과 종료시에 부드러운 시작과 멈춤을 관리합니다. 이징은 자동차가 출발하거나 정지할때 급출발이나 급제동으로 정지하지 않는 자연스런 동작을 말합니다. slicebox 제이쿼리파일은 이미지의 슬라이스를 담당하고 두가지인데 하나는 코드의 간격(white space)이 있어서 보기 편하지만 용량이 min파일보다 약간 큽니다. min파일은 화이트스페이스를 없애서 용량을 줄인 파일입니다. modernizr파일은 웹브라우저가 신기술인 HTML5와 CSS3를 지원하는지를 파악해서 브라우저의 호환성을 높이기 위한 기능을 합니다. 제이쿼리 파일에 대해서는 자세히 알지못해도 되며 설정부분만 이해하면 됩니다. 인덱스파일중 하나를 클릭하면 다음과 같은 화면이 나옵니다.
여섯개의 파일을 다 클릭해도 같은 화면이 나오고 example의 선택이 달라집니다. 현재는 example6를 클릭해서 들어온 것입니다. 좌우에 있는 화살표는 이미지를 슬라이드해서 보는 버튼이고 하단의 플레이버튼은 애니메이션을 플레이하는 버튼입니다. 인포 아이콘은 이미지 하단에 메시지를 출력합니다. 여기서는 example6에 대해서 설명드리지만 다른 파일도 비슷한 내용입니다.
인덱스파일을 에디터에 열면 head태그에 스타일시트 파일과 모더나이저 자바스크립트파일이 링크로 추가되어있습니다. 2는 구글웹폰트를 사용하기 위해 링크를 한 것입니다.
이미지가 들어가는 div부분입니다. 위 div의 sb-slider 아이디에 대해서 슬라이스박스 제이쿼리가 통제를 하게 됩니다.
바로 밑에 제이쿼리 기본파일인 구글 제이쿼리 라이브러리가 링크로 포함되어있어서 별도의 제이쿼리 라이브러리를 파일폴더에 포함시키지 않았습니다. 구글의 제이쿼리 라이브러리를 사용하면 여러가지 잇점이 있습니다. 슬라이스박스 제이쿼리가 링크로 추가되어있고 이 슬라이스 박스 제이쿼리를 실행시키기 위한 코드가 이어서 나옵니다.
4는 슬라이스 조각의 숫자를 설정합니다. 5는 조각난 이미지가 같이 회전하는지를 설정합니다. false로 설정하면 조각난 이미지가 모두 같이 회전합니다. 6과 7의 숫자는 밀리초(mili second), 즉 1000분의 1초 단위입니다. 6은 조각난 이미지가 서로 회전하는 간격을 조절합니다. 7은 하나의 이미지가 회전하는 속도입니다. 위 수치를 다르게 하여 시험해보세요.
슬라이스 제이쿼리 파일(jquery.slicebox.js)을 에디터에 열고 66번째 줄이 보면 추가 설정부분이 있습니다. 설정을 시험하려면 링크 파일의 이름에서 .min을 제거해야 위 파일이 링크에 대체됩니다(이전 이미지에서 2번부분).
1의 오리엔테이션은 슬라이스의 방향을 결정합니다. 기본이 "v"로 되어있어서 세로로 슬라이스되지만 "h"로 바꾸면 아래 사진처럼 가로로 슬라이스됩니다.
2의 Perspective는 슬라이스의 원근을 조절합니다. 200으로 설정하니 다음 이미지처럼 나옵니다.
3의 슬라이스카운트는 홀수로 설정하는데 숫자를 변경해봐도 별다른 변화가 없네요.
4는 애니메이션 되면서 슬라이스의 간격을 설정합니다. 픽셀단위입니다.
5는 숨겨진 측면의 색상을 설정합니다.
6은 슬라이스가 연속적으로 애니메이션 되는 것을 설정합니다.
7은 슬라이스 사이의 속도를 조절합니다.
8은 3D애니메이션의 속도를 조절합니다.
9는 3D가 안되는 브라우저에서 슬라이드의 속도를 조절합니다.
10은 3D가 안되는 부라우저에서 이징 속도를 조절합니다.
11은 ture로 설정하면 자동으로 애니메이션 됩니다. false의 경우 버튼을 클릭해야만 애니메이션됩니다.
12는 이미지 슬라이드의 간격 시간을 조절합니다. 밀리초 단위입니다.
더보기
'부트스트랩.CSS.JS/JQuery' 카테고리 관련글
