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

Interactive Image는 이미지, 텍스트, 오디오, 소셜 링크, SoundCloud 트랙, HTML5 / Youtube / Vimeo 비디오 를 이미지의 대화 형 메모 / 마커 / 댓글 로 사용할 수있는 간단하고 유연한 jQuery 플러그인입니다 . ​ ​다운로드 받은 파일의 압축을 해제한후 examples/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹페이지의 이미지가 표시되고, 이미지 위의 마우스를 올려보면, 아래의 그림과 같이 포인트를 표시해줍니다. ​ ​ 각 포인트에 마우스를 올려보면 일반적인 텍스트(HTML)로 설명문구를 표시하거나, 사진을 추가로 보여주거나, 오디오파일을 재생시킨다거나, 동영상을 재생시킨다거나, SNS사이트로 공유를 한다거나 하는게 가능합니다. ..

* Infinitely Scrollable Vertical Menu 메뉴를 반복스크롤 하여 무한으로 보여줄수 있는 기능 * License MIT LICENSE * 적용방법 첨부된 압축파일을 해제하여 웹루트 디렉터리에 업로드 합니다 상단에 css 와 script 를 호출합니다 ​ 스크롤을 적용할 메뉴부분의 html 및 script 를 작성합니다 적용할 html 문서에 항목이 보이는 영역에 맞는만큼 많은 클론이 필요합니다. 예를 들어, 8 개의 항목이 뷰포트의 높이에 맞으면 8 개의 복제본을 만들어야합니다 (class 의 경우 샘플파일 base.98fd6c19.css 에서 확인이 가능합니다) 웹페이지로 호출하면 아래와 같은 무한 스크롤 메뉴를 확인할 수 있습니다 첨부된 압축파일을 해제하여 샘플파일 index..

* Menu Hover Image Animation 이미지 호버 효과 (Image Reveal Hover Effects)를 제공하며 메뉴 항목을 가리킬 때 멋진 애니메이션으로 이미지를 보여줍니다. * License MIT License * 적용방법 첨부된 압축파일을 다운로드하여 적용할 웹루트 디렉터리에 압축을 해제하여 위치합니다 html 문서상에 상단에css 및 script 를 선언합니다 각 메뉴 및 이미지를 아래와 같이 선언합니다 (관련 class 참고 및 확인은 base.98fd6c19.css 에서 확인이 가능합니다) body 끝나는 지점 윗부분에 js 파일을 불러오도록 선언해줍니다 페이지 호출시 아래와 같은 메뉴효과를 확인할 수 있습니다 ​첨부된 압축파일을 해제하여 index.html 파일의 예제를..

클릭하면 에니메이션 효과와 함께 검색폼이 출력됩니다. 해당 사이트나 첨부파일을 다운로드 받아 소스를 확인할 수 있습니다. ​ ​ ​

​달력에 날짜별로 이벤트를 표시하는 달력 플러그인입니다. 다운로드 받은 파일의 압축을 해제하고, index.html 파일을 웹브라우저로 열어서 보면 데모를 확인하는게 가능합니다. 위 와 같이 기본 4가지 정도의 테마가 있네요. 좌측과 우측의 메뉴와 화살표를 이용해서 월을 표시하는 부분과, 그날의 이벤트를 표시하는 부분을 접을수 있습니다. 하나의 달력으로 위와 같은 조합의 화면을 구성할수 있습니다. 매뉴얼도 상당히 신경써서 제작을 해뒀네요 달력을 이용할수 있는 여러 설정값들을 위와 같이 설명을 해주고, 각 설정을 클릭을 해보면, 실제 코드로는 어떻게 사용을 해야 하는지를 예시로 화면에 표시를 해줍니다. 특정날짜에 이벤트를 추가/삭제를 하는게 가능합니다.

NumberMask 플러그인은 사진 번호, 날짜 및 시간, 신용 카드 번호 / CVC, IP 주소 등과 같은 숫자 값을 마스킹하는 데 사용할 수있는 jQuery 용의 간단한 숫자 입력 마스킹 플러그인입니다. ​ ​- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 NumberMask JS 파일을 링크합니다. 2. 숫자 값을 입력할 폼을 추가하고 원하는 마스크 형식을 # 으로 표시하여 호출합니다. - 작동 예제 ​

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 numeric.js 파일을 링크합니다. 2. 숫자를 입력할 input 태그를 추가하고 numeric 함수를 호출합니다. 3. negative 옵션을 설정하면 숫자 앞에 마이너스(-)를 표기할 수 있습니다. - 작동 예제 negative 옵션에 따른 입력 예제입니다. 소수점까지 입력이 가능합니다. ​

안녕하세요 해피CGI 입니다. 프로젝트 진행 중 입력 박스에서 발생하는 이벤트를 감지 후 처리해야 하는 프로그램을 만들어야 했는데요. 그런데 단순히 감지만 하는게 아닌 특정 시간이 지난 후 감지된 이벤트를 해야 했습니다. 즉, 입력박스가 있고 입력박스에 내용을 입력하되 5초 동안 입력이 없으면 이벤트를 감지하고 이를 임시 저장해야 합니다. 위의 프로그램을 만들려고 하다가 왠지 플러그인이 있을듯 하여 찾아 보게 되었는데요. 역시나 플러그인이 있어서 소개합니다. https://github.com/bgrins/bindWithDelay 사용방법은 매우 간단합니다. Usage: See http://api.jquery.com/bind/ .bindWithDelay( eventType, [ eventData ], ha..

안녕하세요 해피CGI 입니다. 이번에 소개해 드릴 자료는 AJAX 와 HTML5 를 이용하여 이미지를 업로드 하는 자료 입니다. 다른 업로드 기능과 비교하면 매우 가볍다는 장점이 있습니다. 하지만 너무 가볍게 만들어서 iE11 에서는 정상작동 하지 않습니다. 아마도 이미지를 드래그하면 미리보기 형태로 보여주는 이미지 preloaded 때문일 것으로 예상 합니다. 다른 업로드 툴은 무겁지만 IE11 에서도 이미지 preloaded 를 지원하기 위해 외부 플러그인들을 연결해서 사용합니다. 해당 프로그램은 이미지 preloaded 기능을 제거하고 사용하시길 원하시거나 ... 크롬 또는 IE Edge 브라우저 전용으로 사용하시거나 한다면 문제 없이 사용할 수 있을 것으로 보입니다. 해당 자료는 MIT 라이센스 ..

마우스오버시 부드럽게 펼쳐지는 slide 메뉴로 jquery 를 이용하여 제작한 간단하지만 별도 설명없이 퓨어하게 이용할 수 있는 간단한 메뉴스크립트 소스입니다. 메뉴영역을 마우스 오버하면 부드럽게 열리는 서브메뉴 레이어가 출력되고, 영역을 벗어나면 부드럽게 닫기는 형태까지 적용된 간단한 메뉴효과입니다. 위 소스가 핵심사항으로 서브메뉴가 슬라이드 다운된 상태를 유지하고 마우스가 아웃되면 slideUp 을 진행하는 코드입니다. 소스상에 항목 안에 1차에 해당하는 메뉴 디자인을 넣으시면 되고 항목안에 2차 서브메뉴에 해당하는 디자인을 하셔서 이용하실 수 있습니다.