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

안녕하세요 해피CGI 입니다. 해피 종합 쇼핑몰 모바일 솔루션 Ver1.5 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더욱 강력한 기능으로 보답하겠습니다. 감사합니다.

안녕하세요 해피CGI 입니다. 해피 종합 쇼핑몰 솔루션 Ver7.4 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더욱 강력한 기능으로 보답하겠습니다. 감사합니다.

해당 이미지를 마우스 오버한 상태에서 커서의 위치에 따라 배경이미지가 움직이는 효과를 가진 배경이미지 디자인 소스입니다. event: 'mouse_move', animation_type: 'rotate', 위 두가지 소스로 인해 마우스 커서 이벤트 및 에니메이팅 효과를 적용할 수 있습니다. $('.parallax-demo-4').parallaxBackground({ event: 'mouse_move', animation_type: 'rotate', animate_duration: 1, zoom: 70, r otate_perspective: 1000 }); 본 예제에서 총 5가지 효과를 확인할 수 있습니다. 1) 스크롤 시 이미지 움직이는 효과 2) 스크롤시 이미지 rotate 에니메이팅 효과 3) 마우스..

jQuery 를 이용한 타임라인을 생성하는 자료를 소개합니다. 소스코드를 다운로드 하시면 폴더내에 index.html 파일이 있고 바로 실행되는 화면을 볼 수 있습니다. 그래서 간단한 구동방식과 옵션에 대해서 설명을 드립니다. 1.Script, Css 를 호출 하세요. 2.레이아웃을 담당하는 구조는 변경하시면 안됩니다. 기본 구조를 참고하여 timeline__content 파트를 추가하거나 삭제하는 정도의 작업만 하셔야 합니다. (

jQuery 와 Bootstrap 을 이용하여 자동완성 기능을 사용할 수 있도록 공개한 소스가 있어서 안내 드립니다. ^^ 압축파일 다운로드 하시면 기본 index.html 파일이 있는데요. 해당 파일로는 구동이 안되구요 ~ cdn 주소를 사용하시거나 아니면 다운로드 받아서 CSS, Script 를 연결해 주셔야 합니다. 그래서 test.html 파일에 CDN 을 이용하도록 변경한 코드를 같이 첨부해 두었습니다. 첨부된 샘플 파일 (test.html) 을 보시면 입력박스에서 사용될 값들을 정의해 둔 소스가 있습니다. 프로그램 작업 가능하신분은 DB로 부터 읽어와서 구성하시면 좋을듯 하구요. 프로그램 작업 불가능하신분들은 강제코딩 형태로 사용하셔야 할듯 합니다. 기능은 무료로 제공되는 자료치고는 쓸만하지만..

css .balloon_01 { position:relative; margin: 50px; width:400px; height:100px; background:pink; border-radius: 10px; } .balloon_01:after { border-top:0px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid pink; content:""; position:absolute; top:-10px; left:200px; } .balloon_02 { position:relative; margin: 50px; width:400px; hei..

jquery의 .attr을 이용하여 원하는 위치의 요소에 속성을 변경할 수 있습니다. 클릭전 클릭후 .img의 클래스의 .attr을 이용하여 src속성을 변경하였습니다. 다중의 요소들 중에서 특정요소의 값만 찾아서 변경할수도 있습니다. 기본적인 예제지만 도움이 되었으면 좋겠습니다~ 자세한 소스는 파일에 첨부되어 있습니다. 보다 자세한 정보는 아래의 링크를 통해서 확인하실 수 있습니다. http://api.jquery.com/attr/

Css3의 속성중인 box-shadow를 이용하여 종이가 겹쳐 있는 모양을 만들수 있습니다. HTML Css .pape { background: #fff; box-shadow: /* The top layer shadow */ 0 1px 1px rgba(0,0,0,0.15), /* The second layer */ 0 10px 0 -5px #eee, /* The second layer shadow */ 0 10px 1px -4px rgba(0,0,0,0.15), /* The third layer */ 0 20px 0 -10px #eee, /* The third layer shadow */ 0 20px 1px -9px rgba(0,0,0,0.15); /* Padding for demo purposes */..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 jquery 라이브러리 파일과 moment.min.js 파일 링크를 걸어줍니다. 2. 원하는 스타일의 아이콘형 글꼴을 선택하여 링크를 걸어줍니다. 3. 타임라인을 표시할 레이어를 추가합니다. 4. 타임라인에 표시할 이벤트들을 정의합니다. 입력할 데이타 형식은 주석을 참고하세요. 5. 타임라인 플러그인을 호출합니다. (기본값) 5-1. 이벤트가 없는 날짜를 표시할 지 여부를 결정할 수 있습니다. (기본값 null) 5-2. 옵션으로 아이콘 클래스를 정의할 수 있습니다. 5-3. 날짜 출력 형식을 수정할 수 있습니다. 5-4. 특정 날짜를 지정하여 이동시킬 수 있습니다 - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 tagify.css 파일 링크를 걸어줍니다. 2. Jquery 버전 사용시 jQuery 라이브러리 파일 링크와 함께 jQuery.tagify.js 파일을 링크해줍니다. 2-1. 만약 순수한 Javascript만 사용하고 싶다면 tagify.js 파일을 링크해줍니다. 3. 태그를 입력할 INPUT 태그를 추가합니다. 4. tagify 스크립트를 실행합니다. jQuery 버전과 순수 Javascript 버전 구분은 주석을 참고하세요. 5. 태그의 중복 입력을 허용하려면 아래와 같이 duplicates 옵션에 false를 입력하세요. 6. 세부 옵션과 API 메소드, 이벤트 등은 홈페이지를 참고하세요. - 작동 예제