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

모바일 기기에서 이용자가 원하는 색상을 선택하기 위한 컬러피커 jQuery 플러그인 입니다. 모바일기기들은 아무래도 화면이 작다보니 선택가능한 모든 색상을 화면에 표시해주고 선택하는 UI로는 어려움이 있으니, 색을 구성하는 요소를 터치 스와이프를 함으로써, 원하는 색상을 선택하는게 가능하도록 구현을 해뒀네요. 색상만 선택하는 용도이다 보니, 지원하는 옵션이 그리 많지는 않아 보이네요. 해당 UI를 이용했을때 조절이 필요한 몇몇가지(최소,최대,변경되는 단위 등등) 를 조절할 수 있습니다.

텍스트 및 이미지등에서 로딩이 될 경우 블록되는 효과로 밑줄긋기 효과처럼 보이는 Block Reveal Effects 로 on-scroll 시에도 순차적으로 적용되는 예제등을 확인할 수 있습니다. 사이트가 최초 로딩되면 텍스트 및 이미지가 페이지상에 노출되기까지 어느정도 시간이 소요됩니다. (아주 짧은 시간이지만 웹사이트 특성상 출력까지의 로딩되는 시간이 필요합니다.) 로딩되는 효과를 좀더 다이나믹하게 연출하여 지루하지 않는 UI 를 가실 수 있습니다. 다양한 예제가 소개되어있고 위 예제처럼 블럭요소가 지나가는 방향도 설정이 가능합니다. https://github.com/codrops/BlockRevealers/ 위 링크를 통해 다운로드가 가능하며, 소스상에서 보시면 js/anime.min.js js/s..

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

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

Angular, Angular-Sanitize 기반으로 제작된 다양한 자동완성 기능을 제공하는 MassAutocomplete 입니다. http://hakib.github.io/MassAutocomplete/ 페이지로 접속시 다양한 예제와 소스를 확인이 가능 합니다. 예제 아래쪽에는 자세한 옵션 설명이 되어 있습니다.

이미지를 확대해서 보여주는 이미지뷰어 플러그인 입니다. 다운로드 받은 파일의 압축을 해제하고, examples 폴더내의 몇몇 html 파일을 웹브라우저로 열어보면 샘플확인이 가능합니다. 작은 이미지를 클릭하면 위 그림상 아래에 표시되는 것 처럼 상세한 이미지를 표시해줍니다. 확대, 축소 및 다음 이미지, 이전 이미지를 선택해서 보는게 가능합니다. 화면 크기에 맞춰서 이미지뷰어의 크기가 조절이 됩니다. 전체화면 및 이미지 회전 등의 기능이 있습니다. 한번에 여러개 이미지뷰어가 되며, 각 이미지뷰어를 드래그해서 위치 조절도 가능합니다. 이미지뷰어를 커스터마이징 하기 위해서, 여러가지 옵션들을 제공을 해주네요.

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 top-progress-bar.min.js 파일을 링크합니다. 2. topProgressBar 플러그인을 호출합니다. 3. bgColor 옵션을 이용하여 진행 표시 줄의 색상을 설정할 수 있습니다. 4. height 옵션을 이용하여 진행 표시 줄의 굵기를 설정할 수 있습니다. - 작동 예제

- 라이센스 MIT - 사용 방법 1. 2개의 TEXTAREA를 이용하여 비교할 텍스트를 각각 입력합니다. 2. 차이점 비교 버튼을 추가합니다. 3. 비교 결과가 출력될 요소를 추가합니다. 4. 상단에 Jquery 라이브러리와 app.js 파일을 링크합니다. 5. CSS를 통해 비교 결과 화면을 꾸밀 수 있습니다. - 작동 예제

자바스크립트와 css를 이용하여 제작된 풀스크린 슬라이더입니다. 페이저와 마우스 드래그를 통해 슬라이드를 넘길수 있습니다. HTML을 통해 슬라이드 갯수를 조정할 수 있고. CSS를통해 배경이미지, 오버레이된 빗금 도형의 색깔 등을 변경 가능합니다. Javascript로는 애니메이션과 관련된 속성들을 변경할수 있습니다. 풀스크린 홈페이지를 제작시 유용하게 쓰일만한 슬라이더 입니다. 자바스크립트의 autoSlideDelay 부분 숫자를 조정해 각각의 슬라이드가 보여지는 시간을 설정할 수 있습니다. 6000은 6초입니다.

제품 소개, 메뉴 소개 등에 활용가능한 마우스오버 이벤트 슬라이등 패털 자바스크립트 html 소스 편집을 통해 좌우 개수 조절이 가능하며, 이벤트성 홈페이지, 제품 혹은 메뉴 소개를 위한 홈페이지에 사용하면 좋을것 같은 효과와 구성입니다. 해당 영역에 마우스 오버시, 해당 영역에 이미지 영역에 좌우로 커지고, 영역을 클릭시, 해당 영역의 설명 레이어가 전체 출력됩니다. 소스도 비교적 간단하여, 여러 부분에 활용이 가능하네요.