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

다운로드 받은 파일의 압축을 풀고 index.html 파일을 웹브라우저로 열어보면 쉽게 확인이 가능합니다. 자바스크립트로 구현된 숫자 입력툴입니다. 둥근 부분에 표시되는 영역을 마우스로 클릭해서 끌면 색깔이 칠해지는 부분이 늘었다, 줄었다 하면서 그 양을 수치로 표시해주는 기능입니다. 다양한 샘플들이 많은데, 1. 어느정도인지 수치를 표시하지 않는 형태 2. 숫자만큼 색칠하는 영역이 늘어나지는 않지만, 시계바늘과 같은 형태로 수치를 표시하는 샘플 3. 수치를 입력받아서 원형의 그래프를 생성해버리는 예제 4. 마우스 휠을 위,아래로 조절하는 이벤트를 이용해서 수치를 증가시키거나, 감소시키는 예제 위 예제 외에도 몇가지 예제들이 더 있네요. 시간을 입력받아야 하거나, 퍼센테이지를 표시하거나 하는 용도로 활용..

이미지를 슬라이드 할수 있는 스크립트입니다. 다운로드 받은 파일의 압축을 풀어서 index.html 을 웹브라우져로 열어보시면 됩니다. 지원하는 기능이 몇가지가 있는데, 1. 마우스와, 터치 이벤트에 의해서 이미지가 슬라이드 되는 기능 2. 이미지와 HTML태그를 섞어도 슬라이드가 되는 기능 3. 슬라이드 자체의 크기를 비율에 맞게 조절되는 기능 4. 슬라이드의 모든 부분을 편집하거나, 비활성화 하는 기능 이미지 + HTML 컨텐츠로 슬라이드가 되는 예제 화면크기에 맞춰서 사이즈가 조절되는 예제라는데 확인이 되지는 않네요.. 스마트폰기기로 접근해보면 달라지려나 싶긴 하네요. 슬라이드가 작동이 되는 세부기능들이 조절하는 것이 가능한 예제 슬라이드가 자동으로 전환되는 주기, 1번에서 2번으로 전환되는데 까지..

데모페이지를 통해서 어떤 형태의 메뉴인지는 확인이 가능합니다. 예제1) 메뉴를 접어놨을때 메뉴를 클릭해서 펼쳐놨을때 예제2) 메뉴를 가로로 펼치는 예제네요. 메뉴를 접어놨을때 메뉴를 펼쳐놨을때 예제3) 각 메뉴에 해당하는 원의 크기를 조절하는 예제 메뉴를 접어뒀을때 메뉴를 펼쳐뒀을때 가장 위의 빨간색 메뉴는 펼쳐져 있을때 각 메뉴를 구분하기가 어려운 식이었는데, 원을 약간 줄여놓으니 각각의 메뉴라는 인식이 더 쉽게 되네요. 예제4) 상하로 펼쳐지는 메뉴에 대한 예지 메뉴를 접어뒀을때 메뉴를 펼쳤을때 예제5) 메뉴를 펼치거나, 접을때 이벤트를 이용해서 효과를 다르게 주는 예제 메뉴를 접었을때 메뉴를 펼쳤을때 메뉴의 색상이 바뀌고, 선택하려는 메뉴의 색상도 같이 바뀌는 식의 효과를 줄수도 있네요. 모바일 환..

이미지를 슬라이드 할수 있는 스크립트입니다. 다운로드 받은 파일의 압축을 풀어서 index.html 을 웹브라우져로 열어보시면 됩니다. 지원하는 기능이 몇가지가 있는데, 1. 마우스와, 터치 이벤트에 의해서 이미지가 슬라이드 되는 기능 2. 이미지와 HTML태그를 섞어도 슬라이드가 되는 기능 3. 슬라이드 자체의 크기를 비율에 맞게 조절되는 기능 4. 슬라이드의 모든 부분을 편집하거나, 비활성화 하는 기능 이미지 + HTML 컨텐츠로 슬라이드가 되는 예제 화면크기에 맞춰서 사이즈가 조절되는 예제라는데 확인이 되지는 않네요.. 스마트폰기기로 접근해보면 달라지려나 싶긴 하네요. 슬라이드가 작동이 되는 세부기능들이 조절하는 것이 가능한 예제 슬라이드가 자동으로 전환되는 주기, 1번에서 2번으로 전환되는데 까지..

이미지 위에 마우스를 오버하면 이미지를 마치 썸네일 이미지를 생성해서 보여주는 듯한 효과를 jquery 를 통해서 구현한 스크립트입니다. 다운로드 받은 압축파일을 해제해서 index.html 을 웹브라우져로 열어보시면 확인이 가능합니다. 이미지들 위에 마우스를 오버하면 이미지 하단에 캡션이 위로 올라오면서 표시되게 됩니다. 그 과정에서 원본 이미지가 마치 확대되는 효과가 생기는데, 위와 같은 이미지가 슬쩍 확대되어서 보여지면서, 하단에 이미지의 설명 부분이 나타납니다. 비교적 단순한 구조여서 웹사이트의 메뉴나 배너등을 위해서 사용하기는 괜찮을듯 하네요. 출처는 http://www.htmldrive.net/items/show/479/Thumbnail-Effect-With-Zoom-And-Sliding-Ca..

jQuery 플러그인을 이용하여 Blind, Bounce, Clip, Drop, Explode, Fade등 다양한 UI효과를 이용할 수 있습니다. show와 hide 외에도 다양한 포퍼먼스 효과룰 웹에서 이용할 수 있습니다. 관련 소스도 손쉽게 이용할 수 있어서 좋네요. 단조로운 사이트에 다양한 효과를 줄 수 있어서 좋은네요.

* jquery stripe - 책갈피 형식의 jquery 갤러리 입니다 * 사용법 - 다운로드 받은 압축파일을 해제후 src 폴더를 보면 jquery.stripe.js 파일있으며 index.html 파일을 웹에서 실행하면 아래와 같은 책갈피 갤러리가 확인가능합니다 jquery stripe 에 대한 호출은 아래와 같이 할 수 있다 옵션은 다음과 같다 ms {Number}: 전환되는 이미지 애니매이션의 길이 delay {Number}: 전환될때의 지연되는 시간 automatic {Boolean}: 갤러리가 자동으로 재생되는지 여부 min-width {Number}: 이미지의 최소 폭 buttons {Boolean}: 컨트롤ㄹ을 위한 마크업을 렌더링 할 수 있는지 여부 * 참고사항 - 갤러리의 높이가 작은 ..

css3의 트랜스폼을 이용한 parallax 스크롤 형태의 원페이지 디자인페이지 입니다. 간단한 원페이지 형태의 회사소개 페이지나. 포트폴리오 용, 또는 이벤트형으로 사용하시면 좋은소스입니다. 라이센스는 mit라이센스이며 파일안에서도 확인하실 수 있습니다. 마크업 및 사용방법은 위 데모사이트주소로 들어가시면 확인하실수 있으며 다운도 받으실 수 있습니다.