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

jQuery의 내장 메소드인 toggle를 확장하여 효과를 지정하여 요소를 표시하거나, 숨기는 jQuery toggle 소스입니다. blind, bounce, clip, fade 등 다양한 효과를 선택하여 이용가능합니다. 소스도 간편하고, 효과 셀렉트옵션을 선택한 후 실행하면 toggle 요소창이 선택된 효과에 따라 표시 혹은 감춰집니다.

이미지부터 템플릿, 메뉴등 웹사이트에 이용할 수 있는 다양한 퍼포먼스를 확인할 수 있으며,관련 소스를 분석하여 홈페이지내에 반영도 가능한 소스모음사이트입니다. 카테고리별로 원하시는 효과를 확인합니다 이용하는 방법은 아래와 같습니다. 1) 원하는 효과를 확인합니다. - 1585 번째 이미지 마우스 오버효과를 확인합니다. 2) 해당 소스의 html 소스를 확인합니다. - class="snip1585" 라는 css 를 이용하는것을 확인할 수 있습니다. 3) 관련 css 소스를 확인하여 최종 웹사이트에 적용할 소스 구조를 확인하여 응용/사용이 가능합니다. 이로인해 원하는 효과를 사전에 구조파악이 쉽고, 응용하여 효과를 적용할 수 있습니다.

다양한 옵션과 설정값들이 있습니다. 페이징 및 이미지 확대, 축소, 회전 등의 다양한 옵션이 있습니다. 해당옵션들은 전부 on/off 기능이 있습니다. 사이트에서 소스를 다운로드 가능하며 소스와 옵션설정에 대한 설명을 확인 할 수 있습니다.

jquery 를 이용해서 웹페이지의 배경에 동영상을 재생하거나, 웹페이지의 특정 위치에 동영상을 재생하는게 가능하도록 제작된 프로그램입니다. 다운로드 받은 압축파일을 풀면 examples 폴더에 block-bg.html : 특정 영역에 동영상 재생용 샘플 body-bg.html : 전체 배경에 동영상 재생용 샘플 위 파일을 웹브라우져로 열어서 보면 샘플은 확인이 가능합니다. 특정 영역에 동영상이 재생되는 예제 소스코드가 그리 어렵진 않은듯 하네요 동영상 파일을 mp4로 존재하면 웹페이지에 재생이 가능하겠네요 홈페이지를 방문하면 동영상이 재생되는 사이트들이 제법 보이던데, 같은 용도로 활용이 가능할듯도 하네요. 매뉴얼 은 https://github.com/VodkaBears/Vide#readme 위 링크를..

안녕하세요 모바일에서 사용하면 괜찮은 jquery 입니다. PC 에 사용해도 상관은 없지만 모바일에 더 잘 어울릴꺼 같아요 ^^; 기본적인 HTML 은 아래와 같은 구성을 가지고 있습니다. Menu Panel 스타일도 당연히 따라오겠죠 ^^body { width: 100%; height: 100%; } .slideout-menu { position: fixed; top: 0; bottom: 0; width: 256px; min-height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 0; display: none; } .slideout-menu-left { left: 0; } .slideout-menu-right { ri..

자바스크립트로 제작외었으며 디자인 변경이 가능합니다. 해당 사이트에서 소스를 다운로드 받으실수 있습니다. 사용법및 함수에 대한 설명을 확인할 수 있습니다.

웹페이지에 Tag Cloud 를 출력할수 있는 jquery 플러그인입니다. 첨부된 파일을 다운로드 받아서 압축을 해제하고 index.html, index2.html, index3.html 을 웹브라우져로 열어보시면 데모를 확인하는게 가능합니다. 기능은 각 태그들을 알파벳순으로 정렬하는 기능과, 위 이미지의 상단에 있는 모양 에서 하단의 모양으로 변경되는 기능 정도가 있습니다. 단어를 추가하는 것은 HTML태그에 li 태그를 추가하는 정도로 쉽게 가능하며, 자바스크립트는 화면에 보이는 tag의 모양을 변경하는 코드는 아래와 같고, 알파벳순으로 정렬하는 코드는 위 그림 처럼 홈페이지에서 제공도 해주지만, 첨부파일에 포함된 index3.html 의 소스코드내에도 있습니다. 출처는 http://cssglobe...

먼저 covervid.min.js 소스를 연결후 속성을 포함한 마크업을 만들고 동영상 상위 래퍼요소 크기를 조정하여 원하시는 배경형태의 동영상을 적용할 수 있습니다.

jQuery Timeline Plugin 입니다. jQuery 를 이용한 Timeline 을 구성하는 플러그인 입니다. 여러개의 샘플 형식을 제공하는데요. 약력에 사용하면 좋을듯 합니다. ^^ 이건 연혁에 사용해도 괜찮을듯 합니다.

시작값과, 종료값을 입력받기 위한 용도로 사용할 데가 많을것 같습니다. 기본 데모는 아래의 링크를 통해서 확인이 가능합니다. http://ionden.com/a/plugins/ion.rangeSlider/demo.html 스킨도 몇가지 제공을 해주네요. 약간 용도를 바꾼 예제들은 http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html 날짜나 시간을 입력받기 용도로도 사용이 가능하네요. 사용자가 인터렉티브하게 사용하는 예제는 http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html 위 링크를 통해서 가능합니다. 사용된 예제처럼 이용하기 위해서 어떤 스크립트를 작성해야 하는지를 페이지에서 ..