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

Windows 파일 탐색기 스타일의 드롭다운 메뉴를 생성하는 jQuery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제하면 생기는 index.html 을 웹브라우저로 열어서 보면 확인이 가능합니다. 웹페이지에 위 그림과 같은 메뉴를 구현하는 예제입니다. index.html 파일의 소스코드를 보면, 메뉴를 추가하거나, 삭제하는게 그리 어려워 보이진 않네요. ul, li 태그를 이용해서 화면에 출력되는 메뉴의 순서 및 텍스트를 쉽게 조절이 가능합니다. 각 메뉴에 해당하는 기능을 구현하는건 제법 일이 많을듯 하네요. 윈도우 탐색기의 파일메뉴와 같은 모양으로, 웹페이지로 이동하는 단순한 메뉴들을 구성하려고 할때 사용하면 괜찮을듯 합니다. ​

9가지의 애니메이션 배경이 제공되는 quietflow.js 입니다. http://paulkr.github.io/quietflow.js/ 페이지에 접속하여 샘플 확인 및 구동 소스를 확인이 가능 합니다. 이곳에서 파일을 다운로드 받으셔서 이용하셔도 되고 https://github.com/paulkr/quietflow.js 페이지에서 소스 다운로드를 하셔도 됩니다. 해당 다운로드 받으신 파일에는 demo 소스도 포함이 되어 있으므로, 해당 소스를 활용하여 필요하신곳에 이용을 하면 됩니다 ​ ​ ​ ​

심플하게 화면을 스크롤할 때 여러가지 애니메이션 효과를 적용 할 수 있는 ScrollMe 입니다. Jquery Plugin 으로 구성 되어 있습니다. 이곳에 첨부된 파일을 다운로드 하셔서 이용을 하시거나 최신버전의 다운로드는 https://github.com/nckprsn/scrollme 페이지에서 할 수 있습니다. 다운로드 받은 파일의 압축을 풀어보시면 아래와 같이 js 파일을 확인이 가능 합니다. 해당 Plugin 의 사용 방법은 http://scrollme.nckprsn.com/ 페이지에서 확인이 가능 합니다. ​

Javascript 배열에서 데이터를 가져와 에니메이션 효과가 있는 막대 그래프로 변환하는 JQuery 플러그인 입니다. ​ ​다운로드 받은 파일을 압축해서 나오면 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 실행해보면 화면에 위 그림과 같이 막대그래프가 생성되어서 표시가 됩니다. 그래프를 표시하기 위해서 사용된, index.html 파일의 HTML 소스코드를 확인해 보면 그래프에 필요한 제목, 값 으로 구성된 javascript 의 배열을 이용한게 확인이 됩니다. 더 많은 기능으로는 X축, Y축 라벨을 포함하고, 마우스 오버시 툴팁이 가능하고, 행의 숫자를 지정할수 있고, 반응형이면서 사용하기가 쉽습니다. 막대 그래프를 포함해서 여러가지 그래프들(파이,라인,영역 등등)을 이용할 ..

크로스 브라우저 Syntax Highlighter JQuery 플러그인입니다. Syntax Highlighting 이란 구문 강조를 의미하는데, 프로그램 소스 코드 등을 노출하여 설명할때 주로 사용됩니다. ​ ​- 라이센스 MIT - Syntax Highlighting 이란? Syntax Highlighting 이란 구문 강조를 의미하는데, 프로그램 소스 코드 등을 노출하여 설명할때 주로 사용됩니다. 소스 코드 줄을 구분하고 각 프로그램 언어에 맞게 변수, 함수 등의 색상을 달리하여 소스 코드를 보기 쉽게 노출해 줍니다. - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 Syntax JS 파일을 링크합니다. 2. syntax 함수를 호출합니다. theme 값을 통해 테마도 변경이 가능합니다. (b..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 카운트 다운 타이머 JS 파일을 링크합니다. 2. 카운트 다운 타이머를 출력할 객체를 추가합니다. 3. countdown 함수를 호출하고 카운트 다운 시간을 설정합니다. $element: 카운트 다운 출력할 객체 ID $daysAdd: 일 $hoursAdd: 시 $minutesAdd: 분 $secondsAdd: 초 4. CSS 스타일로 카운트 다운 타이머와 로딩 바의 스타일을 설정할 수 있습니다. 5. JavaScript 로도 카운트 다운 타이머와 로딩 바의 스타일을 설정할 수 있습니다. 6. 카운트 다운 타이머가 종료되면 출력할 문구도 설정할 수 있습니다. - 작동 예제

* Revealing Hero Effect with CSS & JavaScript - javascript 로 만든 페이지 스크롤입니다 첨부된 압축파일을 다운로드 하여 원하시는 웹루트 디렉터리에 압축을 해제하여 업로드 합니다 html 구조는 아래와 같습니다 샘플파일에서 제공되는 css 파일을 호출합니다 페이지 스크롤할 영역을 아래와 같이 설정합니다 html 문서 하단에 샘플파일에서 제공되는 js 파일을 호출합니다 비교적 간단한 구성이기때문에 디자이너께서 활용하시기 괜찮을것 같습니다

* Infinitely Scrollable Vertical Menu - 무한스크롤이 가능한 메뉴플러그인 입니다 * License - MIT License 스크롤 메뉴 웹페이지를 구성하는 html, js 샘플 구조는 아래와 같습니다 menu__item 으로 선언된 class 를 js.00a46daa.js 파일에서 컨트롤 하게끔 되어있습니다 위의 코드를 실행한 웹페이지 결과는 아래와 같습니다 디자인에 대한 세부조정은 첨부된 base.98fd6c19.css 파일에서 조정이 가능합니다 디자인 능력이 있으신 작업자분께서 활용하시면 괜찮으시리라 생각됩니다

페이지 섹션 사이를 전환하면서 표시기가 휠 라운드의 원 안에 이동하는 휠 슬라이더가 있는 독창적 인 한 페이지 스크롤 웹 사이트 를 만드는 jQuery / CSS 솔루션 입니다. 최신 Bootstrap 프레임 워크와 호환되며 Bootstrap의 scrollspy 구성 요소가 필요합니다. ​ ​원 페이지용 웹사이트를 제작할 때 사용하면 괜찮을 듯 합니다. 다운로드 받은 파일의 압축을 해제하고, slider-wheel.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 마우스 휠이나, 키보드 방향키를 이용해서 웹페이지의 스크롤을 위,아래로 조절을 하면 웹페이지의 배경이 스크롤에 따라서 변경이 됩니다. 중앙에 동그란 부분에 표시되는 컨텐츠가, 스크롤의 위치에 해당하는 컨텐츠로 교체가 됩니다. 동그란..

반응형 기반의 회전식 슬라이드 및 터치식 슬라이드 등 다양한 효과의 슬라이드 jquery 플러그인 소스입니다. 터치 앤 드래그 및 최신 브라우저에 호환성이 높은 소스입니다. 예시된 샘플 슬라이드 효과는 대략 10여종이며, 기본적인 슬라이드 형식은 아래와 같습니다. 최근 홈페이지에 자주 이용되는 마우스 휠 슬라이드 효과가 있어 해당 소스를 이용한 효과를 참고하시기 바랍니다. https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html 우선 기본베이스가 되는 슬라이드 소스를 html 에 삽입후 ​ 라는 소스를 적용하여 마우스 휠 소스가 적용되도록 합니다. 혹은 다운로드 받은 소스에서 docs > demos 폴더내에 mousewheel.html 파일을 ..