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

마우스 오버시 이미지를 변경하는 Javascript 이미지 영역에 마우스 오버시 이미지가 변경되는 Javascript 소스 첨부된 Javascript 소스내 이미지경로를 지정할 수 있으며, 변경시 합성되는 이미지 경도 지정할 수 있습니다.

위의 이미지를 보시면 기능 확인이 바로 되실 겁니다. 소스 적용도 간단합니다. var popbox = new Popbox({ blur:true, overlay:true, }); 위의 스크립트와 Popbox content 1 Close Popbox content 2 Close Main content of the page Open mypopbox 1 Open mypopbox 2 &nbsp 위의 기본 HTML 을 참고하시면 되겠습니다.

해피CGI, #happycgi, #cgimall, #JQuery, #image, #zoom, #이미지확대 - 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 xzoom.css 파일, xzoom.min.js 파일을 링크합니다. 2. IMG 태그로 이미지를 출력하고 아래 옵션을 적용합니다. · xoriginal - 확대/축소된 이미지로 사용되는 큰 이미지 경로 · xpreview - 선택 사항이지만 설정 시 이 속성은 중간 미리보기 이미지로 사용되는 반면 이 경우 src 속성은 작은 축소판 이미지로 사용됩니다. 이 속성이 설정되어 있지 않으면 src 속성이 중간 미리보기 이미지로 사용됩니다. · xtitle - 캡션으로 사용될 텍스트 문자열이며 titleClass가 있는 "div" ..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 jquery.fixedTableHeader.js 파일을 링크합니다. 2. Table 소스코드를 코딩하고, fixedTableHeader 플러그인을 호출합니다. 3. 고정될 헤더 부분을 지정합니다. (기본값 : th) 4. 고정되었을 때 헤더 부분의 CSS를 재정의할 수 있습니다. - 작동 예제

jQuery 를 이용하여 형광펜처럼 밑줄 애니메이션을 추가하는 jQuery 플러그인 입니다. 형광펜의 크기, 색상, 속도 등을 조절할 수 있습니다. 라이센스는 MIT License 입니다. 사용법 안내 입니다. 1. 텍스트에 강조효과를 줄 영역 설정 반드시 class="marker-animation" 형태로 클래스를 설정해 줘야 합니다. 2. 스크립트 호출 3. 결과화면 4. 사용 가능한 옵션 안내 //color $('.marker-animation').markerAnimation({ color: '#fe9' }); //thickness $('.marker-animation').markerAnimation({ thickness: '.6em' }); //duration $('.marker-animation..

심플하고 강력한 차트 API인 Dimple 입니다. http://dimplejs.org/ Dimple은 다양한 구조의 차트를 제공하고 있습니다. 제공되는 차트는 아래의 데모 페이지에서 확인을 할 수 있습니다. http://dimplejs.org/examples_index.html http://dimplejs.org/advanced_examples_index.html

브라우저 스크롤링시 다양한 액션을 제공하는 ScrollMagic 입니다. http://scrollmagic.io/ javascript 소스는 CDN으로 연결하시거나 직접 다운로드 하여 이용도 가능 합니다. https://scrollmagic.io/examples/ 데모 페이지로 접속하여 제공되는 다양한 데모를 확인이 가능하고, 데모페이지에 적용된 소스도 쉽게 볼 수 있습니다.

Vanilla JS Image Lightbox 의 특징. 1. 초기화가 쉽습니다. 2. 반응형 입니다. 3. 사용자가 박스의 로딩 속도를 설정할 수 있습니다. 4. 커스텀 이벤트 콜백 함수를 제공합니다. 5. 순수 CSS Retina Ready UI 이미지 입니다. 라이센스는 MIT License 입니다. 사용법 안내 입니다. 1. CSS 호출 2. 플러그인 호출 3. 이미지 선언 4. Script 호출 및 실행

* ViewScroller - ViewScroller.js는 전체 페이지 스크롤 웹 사이트를 만들 수있는 사용하기 쉬운 솔루션입니다. CSS3 전환을 사용하고 jQuery 애니메이션은 브라우저 기능에 따라 다릅니다. IE8과 같은 일부 오래된 브라우저는 CSS3를 지원하지 않습니다 * License - MIT License * 사용방법 - 첨부된 압축파일을 다운로드하여 압축해제후 적용할 웹경로에 업로드 합니다 html 문서에 아래와 같이 css 를 불러오고 선언합니다 그후 각 풀페이지를 스크롤링할 좌측메뉴를 만듭니다 다음은 풀페이지 스크롤을 보여줄 본문내용을 작성합니다(앵커아이디에 맞게 작성) 마지막으로 하단에 필요한 js 호출 및 스크립트를 선언합니다 결과는 아래와 같은 형태로 출력되며 샘플파일 ind..

* Javascript Smoke Effect - Smoke.js는 웹용 Smoke Effect를 만드는 자바 스크립트 라이브러리입니다. * 사용방법 - 첨부된 압축파일을 다운로드하여 적용할 웹경로에 압축해제하여 업로드 합니다 그후 적용된 html 문서에 smoke.js 를 불러옵니다 이후 아래와 같은 형태의 스크립트 사용이 가능해집니다 스크립트 사용의 짧은 예) 복사가 가능한 예) 그외 API 정보는 아래와 같습니다 context — 연기를 그릴 캔버스의 컨텍스트 [r, g, b] — (선택 사항) 연기에 적용 할 색상 party.start() - 애니매이션 시작 party.stop() - 애니매이션 중지 party.addSmoke(x,y,numberofparticles) x,y — 캔버스에서 연기가 ..