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

심플하고 강력한 차트 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 — 캔버스에서 연기가 ..

신규출시 업종별 솔루션 회사소개03 홈페이지 안녕하세요 해피CGI 입니다. 업종별 솔루션 회사소개03 홈페이지가 새롭게 출시하였습니다. 자세한 사항은 아래의 링크를 클릭하여 상품상세화면 및 사용자화면, 관리자모드를 참조해주시기 바랍니다. 더욱 좋은 기능과 서비스로 보답하겠습니다. 감사합니다.

모바일용 웹페이지를 제작할 때 상단 부분에 세줄(햄버거)이 화면을 스크롤(스와이프) 할때 숨기거나, 표시해주는 jQuery 플러그인입니다. 스크롤을 내려보면 상단에 세줄 모양의 바가 화면 스크롤을 따라서 내려오거나, 스크롤을 빠르게 내리는 경우 상단의 바가 화면에서 사라집니다. 햄거버 모양의 아이콘 외에 로고, 그 외의 아이콘 들이 추가된 예제입니다. 햄버거바를 클릭하면 메뉴 화면이 열리면서 햄버거 모양의 아이콘이 닫기를 의미하는 아이콘으로 변경시 에니메이션을 주는 예제입니다. 그 외에도 햄버거 바의 위치를 좌에서 우로 조절을 한다거나, 로고를 포함한다거나, 아래 그림 처럼 검색폼이 포함된 예제가 있습니다.

CSS 그리드 레이아웃 관련 자료사이트입니다. flex와 grid를 헷갈릴수도 있는데 아래의 사이트의 내용들을 확인하시면 정확히 내용을 확인할 수 있습니다.^^ 1분코딩 https://studiomeal.com/archives/533 CSS Tricks https://css-tricks.com/snippets/css/complete-guide-grid/ Heropy Tech https://heropy.blog/2019/08/17/css-grid/

오직 CSS로 제작된 종이가 넘겨지는 책입니다. html 소스에서 위 radio 버튼들을 확인해보실 수 있습니다. 각 책 페이지 영역에 radio버튼들의 위 label이 감싸져 있으므로 왼쪽, 오른쪽 종이 넘김 효과를 준 것을 확인해보실 수 있습니다. 자세한 소스는 홈페이지에서 확인하세요. ^^

Click Me 버튼을 클릭하면 별, 사각형 등 다양한 형태의 파티클이 출력됩니다. [파티클 html] [파티클 css] .btn-particles { width: 100px; height: 100px; position: absolute; border-radius: 50%; color: #eee; font-family: monospace; z-index: 5; } [파티클 js 중 아이콘 부분] var shapes = [ '', // '', '', '']; 위 html과 css로 파티클 영역이 생성되며, js소스로 해당 영역안에 svg 아이콘들을 생성되어 뿌려지고 있습니다. 자세한 소스는 홈페이지에서 확인해보실 수 있습니다. ^^