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

스크롤 동작에 따라 카드가 원형으로 회전하며 강조되는 인터랙티브 갤러리 예제입니다.중앙에 위치한 카드가 자연스럽게 확대되거나 강조되어 시각적인 집중 효과를 제공합니다.HTML, CSS, JavaScript를 조합하여 부드러운 애니메이션과 스크롤 연동 기능을 구현하였습니다.타임라인 형태의 레이아웃으로 콘텐츠를 순차적으로 보여주기에 적합합니다.포트폴리오, 프로젝트 소개, 이미지 갤러리 등 다양한 웹페이지에 활용할 수 있는 UI 소스입니다.HTML 구조 https://picsum.photos/id/634/1200/1200"> https://picsum.photos/id/228/1200/1200"> https://picsum.photos/id/661/1200/1200"> ..

CSS와 SVG를 활용하여 구현한 텍스트 프레임 애니메이션 예제입니다.SVG의 textPath를 사용해 텍스트가 지정된 경로를 따라 자연스럽게 흐르도록 제작되었습니다.별도의 자바스크립트 없이 CSS 애니메이션만으로 부드러운 회전 효과를 구현한 것이 특징입니다.테두리 영역을 따라 반복적으로 움직이는 텍스트가 감각적인 디자인 요소를 연출합니다.웹사이트 메인 비주얼, 이벤트 배너, 프로모션 영역 등에 응용하기 좋은 소스입니다.HTML 구조 http://www.w3.org/2000/svg" aria-labelledby="t"> width="200" height="200" preserveAspectRatio="xMidYMid slice" clip-path="url(#b..

PDF.js는 별도의 프로그램 설치 없이 웹 브라우저에서 PDF 문서를 바로 열람할 수 있도록 지원하는 오픈소스 Javascript 라이브러리입니다.Mozilla에서 개발했으며, 높은 안정성과 호환성을 기반으로 다양한 기업 및 기관 사이트에서 표준 PDF 뷰어로 활용이 되고 있습니다. * 주요 특징 * - 브라우저 내에서 PDF 바로 보기 (다운로드 없이 열람 가능) - 확대/축소, 페이지 이동, 검색 등 기본 뷰어 기능 제공 - Chrome, Edge, Firefox 등 주요 브라우저 완벽 지원 - HTML 기반 UI로 커스터마이징 가능 - 서버 부담 없이 클라이언트에서 렌더링 처리실제 구동되는 데모는 아래 페이지에서 확인이 가능 합니다.https://mozilla.github.io..

AG Grid는 대용량 데이터 처리에 최적화된 프리미엄급 Javascript 데이터 그리드 라이브러리 입니다.관리자 시스템과 백오피스 구축 시 가장 많이 검토되는 솔루션 중 하나입니다.https://www.ag-grid.com/ https://www.ag-grid.com/example/ 페이지에서 다양한 데모를 확인이 가능 합니다.자세한 사용방법은https://www.ag-grid.com/react-data-grid/installation/ 페이지와https://www.ag-grid.com/react-data-grid/reference/ 페이지에서 확인하여 웹사이트에 적용을 하면 되겠습니다.소스 다운로드가 필요하신분은 https://github.com/ag-grid/ag-grid 에서 다운로드가 가능 합..

중앙을 기준으로 이미지 카드들이 자연스럽게 회전하며 배치되어,포트폴리오, 갤러리, 브랜드 소개 페이지 등에 활용하기 좋습니다.자세한 내용은 데모를 참고하시기 바랍니다.HTMLCSS

이미지가 상하로 슬라이드 되는 디자인 입니다.슬라이드와 왼쪽 텍스트가 같이 움직입니다.자세한 내용은 데모를 참고하시기 바랍니다. HTML CSS

바로가기 버튼이 들어간 카드 유형 UI입니다.다양한 사이트에서 응용 가능합니다. HTML 구조 leading companieshave trusted us https://images.unsplash.com/photo-1601049676869-702ea24cfd58?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Trust & Co." /> arrow_outward ..

카드 유형 마우스 오버 이펙트입니다.마우스의 움직임에 따라 빛이 밝혀지는 효과입니다.소스를 변경하여 다양하게 응용 가능합니다.HTML 구조 Apartments Lorem ipsum dolor Unicorns Lorem ipsum dolor... CSS 소스:root { --bg-color: rgb(20, 20, 20); --card-color: ..

jQuery 4.0 이 출시 되었습니다.4.0 이 되면서,IE 10 이하 브라우저 지원이 중단 되었습니다.그리고 사용되지 않는 함수는 제거 되었습니다.jQuery.isArray, jQuery.parseJSON, jQuery.trim, jQuery.type, jQuery.now, jQuery.isNumeric, jQuery.isFunction, jQuery.isWindow, jQuery.camelCase, jQuery.nodeName, jQuery.cssNumber, jQuery.cssProps, 그리고 jQuery.fx.interval.위의 함수들이 제거 되었습니다.여러 함수와 IE 10 이하 브라우저 지원 중단 되면서, 코드가 다이어트 되어,압축 시 약 19.5KB! 까지 다이어트 되었습니다.IE 10..

다양한 아이콘 셋을 제공하는 사이트 입니다. 여러 시스템 아이콘도 지원하고 있고각 나라 국기 아이콘도 제공하고 있습니다. 다양한 모양으로 지원하니 사이트를 한번 둘러보시는걸 추천 드립니다.SVZ 부터 CSS, PNG 까지 받을 수 있습니다.아이콘이 필요할때 이용해 보시기 바랍니다.