웹솔루션개발 22년 노하우! 해피CGI의 모든것

* circleChart CircleChart는 간단한 원형 차트를 만드는 데 유용한 jQuery 플러그인입니다. * License MIT License * 사용방법 첨부된 압축파일을 다운받아 압축해제후 원하는 웹루트 디렉터리에 업로드 합니다 그후 원형차트 그래프가 출력될 div 영역 선언과 스크립트를 실행할 수 있도록 코드를 작성합니다 스크립트내에 사용할 수 있는 각각의 옵션은 첨부된 압축파일안에 있는 README.md 에서 확인이 가능합니다 위의 코드에 대한 출력결과는 아래와 같습니다

* Cuttr.js Cuttr 는 사용하기 쉬운 jquery 라이브러리로 여러줄 텍스트 콘텐츠를 주어진 사양게 맞게 잘라서 보여줍니다 * License GNU GENERAL PUBLIC LICENSE * 사용방법 첨부된 압축파일을 다운로드하여 압축을 해제한후 원하는 웹루트 디렉터리에 업로드를 합니다 아래와 같이 class 를 선언하여 멘트를 기재후 아래와 같이 jquery 파일과 다운받은 js 파일, 스크립트를 실행합니다 결과는 다음과 같이 텍스트와 버튼이 생성되는것을 볼수 있으며 버튼의 실행에 따라 글자가 모두 보여지거나 일부 감춰지는 기능을 확인할 수 있습니다 첨부된 파일의 examples/index.html 파일에 관련 예제가 있으니 참조하시면 좋을것 같습니다

* jquery tiltShift.js 는 사진에 흐림,포커스 효과를 줄 수 있는 jquery plugin 입니다 * 라이센스 - GNU GPL License * 기능 - 초점 설정 - 흐림 반경에 대한 설정 - 초점영역의 양, 이미지의 날카로움 설정 - 완전한 초점과 완전한 흐림 사이의 영역의 양 설정 - 방향에 대한 설정 - 크롬 및 사파리6 CSS3 필터를 광범위하게 지원되지 않음 * 사용방법 첨부된 파일을 다운로드 하여 압축을 풀고 아래와 같은 코드를 작성한후 응용하여 원하는 형태로 작업합니다 (index.html 을 확인하시면 샘플예제가 있음) - 상단 css, js 선언부 * 아래는 이미지 호출과 함께 옵션을 설정한 부분입니다 -position : 초점의 점을 설정합니다 -blur : 흐림반경..

jQuery를 이용하여 다양한 효과를 낼 수 있는 소스를 모아둔 사이트 입니다. 데모 페이지를 이용하여 효과를 확인해보실 수 있으며 소스 다운로드 및 사용방법이 안내되어 있어 쉽게 활용이 가능합니다.

플레이어에 사용할 음악은 태그에서 값을 입력하면 자동으로 플레이가 됩니다. 플레이도중 플레이바에 마우스 커서클릭시 즉시 반영되어 스킵이 가능합니다. 소리크기역시 플레이바와 마찬가지로 클릭으로 변경이 가능합니다. 이외 플레이어의 핵심 파일인 audioplayer.css 을 조절하여 플레이어의 색상 및 스킨등의 변경이 가능합니다.

웹사이트에 유용하게 적용할 Jquery Plugin 입니다 * License - MIT License (MIT) * 특징 - 수직/수평 스크롤 - 조정 가능한 스크롤 - 마우스 휠, 키보드 및 터치 지원 - CSS를 통해 즉시 사용가능한 테마와 사용자 정의 - RTL 방향지원 - 스크롤 기능의 전체 제어를 위한 옵션 매개 변수 - 사용자 정의 콜백 * 사용법 - HTML 선언부, Jquery & CSS 선언부 로 나뉘어져 있으며 자세한 코드 및 설명은 첨부된 소스를 다운로드 받고 아래의 링크를 클릭하시면 샘플코드를 확인하실 수 있습니다 http://manos.malihu.gr/jquery-custom-content-scroller/ * 요구사항 및 호환성 - Jquery Ver 1.6.0.**** 이상 ..

디자인이 쉽지않았던 셀렉트박스에 wSelect jQuery Plugin을 이용해 아이콘을 추가할 수 있습니다, 데모화면 사이트에 접속하여 상단에 보여지는 Download 링크를 클릭합니다. 링크 클릭시 페이지가 이동되게 되며, 리스트들 중 가장 상위에 있는 파일을 다운받으시면 됩니다. 다운한 zip파일의 압축을 풀면 구현에 필요한 css파일, js파일, 그리고 아이콘이미지등을 확인하실 수 있습니다.

css와 jQuery를 이용하여 양쪽의 블록이 열리고 닫히는 효과(커튼효과)입니다. HTML형태로 기본구조를 구성합니다. section 태그와 div태그를 이용하여 단락 및 구조를 구성합니다. 아래는 커튼효과에 사용되는 각종 css 스타일입니다. 모든 소스 및 데모체험은 해당사이트에서 확인 및 다운로드가 가능합니다. 데모화면과 같이 좌우의 블록이 커튼효과와 함께. 다음 내용이 보여집니다. 원페이지형태의 사이트를 보다.. 다이나믹한 효과로 만들수 있습니다.

클릭하면 해당 메뉴의 레이어가 열리고 열려있던 레이어는 닫히는 아코디언 메뉴입니다. 레이어가 레디자인 컨텐츠를 포함이 가능합니다. 사이트에서 로그인하시면 해당 메뉴 소스를 다운로드 받으실수 있습니다. 열려있던 메뉴를 한번더 클릭하면 완전히 닫혀있는 메뉴가 됩니다. 간단한 소스로 부드럽게 작동하는 아코디언 메뉴를 만들고 응용하기 쉽습니다. 익스플로어 10버전 이상 브라우저, 크롬 브라우저에서 작동합니다.

위와 같은 패턴종류, 사이즈, 색상값을 설정하면 데모이미지가 변경되게 됩니다. 위 소스를 응용하여 이미지와 합성하여 위 이미지 샘플과 같은 용도로 응용이 가능합니다. 위와같은 다양한 종류의 패턴을 확인할 수 있습니다.