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

candy cane이란 위 이미지의 지팡이 모양 사탕을 말하는 것입니다. 지팡이사탕의 사선 무늬를 텍스트에 입혀 사선이 움직이는 귀여운 효과를 css만으로 만들어 볼 수 있습니다. 홈페이지 또는 첨부파일을 받아보시면 자세한 소스를 확인하실 수 있습니다. 스타일 소스 중 --color1: #000; --color2: #2e8ff8; 위 컬러값을 변경하면 색상이 변경됩니다. keyframes 소스로 움직이는 효과를 주고 있으며 keyframes은 익스플로어에서 지원하지 않고 있어 크롬, 파이어폭스 등 지원하는 브라우저로 효과를 확인 하실 수 있습니다.

문서내에 존재하는 테이블의 데이터를 엑셀화하여 저장할 수 있습니다. jQuery Plugin 이며, 라이센스는 MIT 입니다. 소스다운을 누르시면 압축 파일을 다운로드 받을 수 있습니다. 압축 해제하셔서 폴더로 들어가면 demo 폴더가 있습니다. index.html 파일은 원본파일이며, happy.html 은 제가 임의로 가공한 파일 입니다. 심플한 코드를 보고 싶다면 happy.html 을 보십시요. 사용법은 매우 심플 합니다. 1. 라이브러리를 호출하세요. 2. 엑셀로 만들 데이터의 테이블을 만들어 주시되 class 명은 맞춰주셔야 합니다. 번호 이름 전화번호 배송지 주문번호 배송메모 1 홍길동1 010-1111-1111 대구 달서구 두류동 776-1 N-192858291-D9S8 문앞에 두시고 문자..

CSS3 3D 변환 기능을 사용하여 이미지, 배경 이미지, Youtube, Vimeo, HTML5 Video 등등 ... 많은 HTML 요소에 부드러운 Parallax Effect 를 추가하는 jQuery Plugin 입니다. ​ ​ 사용법은 생각보다 쉽습니다. 1. 기본적으로 jQuery Plugin 이므로 jQuery 를 호출해 주셔야 합니다. 2. Script 호출 해 주세요. 3. HTML 요소는 아래처럼 하시면 됩니다. Your content here... Your content here... Your content here... 4. CSS 를 선언하여 변경할 일이 있다면 플러그인 호출전에 미리 선언하시거나 jarallax CSS 파일에 넣어두셔도 됩니다. .jarallax { position..

Interactive Image는 이미지, 텍스트, 오디오, 소셜 링크, SoundCloud 트랙, HTML5 / Youtube / Vimeo 비디오 를 이미지의 대화 형 메모 / 마커 / 댓글 로 사용할 수있는 간단하고 유연한 jQuery 플러그인입니다 . ​ ​다운로드 받은 파일의 압축을 해제한후 examples/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹페이지의 이미지가 표시되고, 이미지 위의 마우스를 올려보면, 아래의 그림과 같이 포인트를 표시해줍니다. ​ ​ 각 포인트에 마우스를 올려보면 일반적인 텍스트(HTML)로 설명문구를 표시하거나, 사진을 추가로 보여주거나, 오디오파일을 재생시킨다거나, 동영상을 재생시킨다거나, SNS사이트로 공유를 한다거나 하는게 가능합니다. ..

위의 테이블은 css로 반응형 스타일을 주어 작은 화면에서 아래의 이미지와 같이 한줄의 내용이 모두 합쳐져 하나로 출력됩니다. 사이트 또는 첨부파일을 받아보시면 자세한 소스를 확인하실 수 있습니다. 아래의 미디어 쿼리 소스로 700px 이하의 너비에서 내용이 합쳐지도록 조절되며 html 소스는 크게 2부분으로 구성되어 있습니다. 1) 표 타이틀(table head) 2) 표 내용 부분 화면의 너비에 따라 출력되는 타이틀이 다르기 때문에 표 타이틀이 내용부분에서도 반복되는 것을 볼 수 있습니다. 해당 부분을 참고 하셔서 본 반응형 테이블 소스를 유용하게 사용해보세요.

* Infinitely Scrollable Vertical Menu 메뉴를 반복스크롤 하여 무한으로 보여줄수 있는 기능 * License MIT LICENSE * 적용방법 첨부된 압축파일을 해제하여 웹루트 디렉터리에 업로드 합니다 상단에 css 와 script 를 호출합니다 ​ 스크롤을 적용할 메뉴부분의 html 및 script 를 작성합니다 적용할 html 문서에 항목이 보이는 영역에 맞는만큼 많은 클론이 필요합니다. 예를 들어, 8 개의 항목이 뷰포트의 높이에 맞으면 8 개의 복제본을 만들어야합니다 (class 의 경우 샘플파일 base.98fd6c19.css 에서 확인이 가능합니다) 웹페이지로 호출하면 아래와 같은 무한 스크롤 메뉴를 확인할 수 있습니다 첨부된 압축파일을 해제하여 샘플파일 index..

* Menu Hover Image Animation 이미지 호버 효과 (Image Reveal Hover Effects)를 제공하며 메뉴 항목을 가리킬 때 멋진 애니메이션으로 이미지를 보여줍니다. * License MIT License * 적용방법 첨부된 압축파일을 다운로드하여 적용할 웹루트 디렉터리에 압축을 해제하여 위치합니다 html 문서상에 상단에css 및 script 를 선언합니다 각 메뉴 및 이미지를 아래와 같이 선언합니다 (관련 class 참고 및 확인은 base.98fd6c19.css 에서 확인이 가능합니다) body 끝나는 지점 윗부분에 js 파일을 불러오도록 선언해줍니다 페이지 호출시 아래와 같은 메뉴효과를 확인할 수 있습니다 ​첨부된 압축파일을 해제하여 index.html 파일의 예제를..

Css로만 이루어진 모달 팝업창입니다 크롬 및 최신버전의 ie버전에서는 정상작동을 하지만 하위버전의 ie브라우저라면 정상작동을 하지 않을 수 있습니다. 압축파일내에 index.html 파일과 style.css 파일이 있으며 호출하여 바로 확인하실 수 있습니다.

햄버거메뉴 아이콘을 클릭했을때 다양한 애니메이션 효과가 넣을수 있습니다. 해당 사이트나 첨부파일을 다운로드 받아 소스를 확인 할 수 있습니다. ​ ​ ​

안녕하세요 해피CGI 입니다. 해피 체험단모집 솔루션 타입B 모바일 Ver2.0 이 새롭게 오픈하였습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더 좋은 모습으로 보답하겠습니다. 감사합니다.