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

첨부파일을 다운로드 받아서 압축을 해제한 후 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 모달창이 화면에 보여지면서, 기본형(별다른 효과가 없는), 페이드(fade) 효과를 주면서 뜨도록 하는 타입이 있고, 배경이미지를 보여주고 모달화면이 생기는 효과가 있습니다. 기본형 또는 페이드 효과를 줬을때 화면에 모달이 표시되는 샘플 HTML태그에서 아래와 같은 소스코드로 기본형 또는 애니메이션 효과를 줄수 있네요. Default Modal Fade Animation 배경에 이미지가 포함된 예제도 있는데, Image" target=_blank>https://source.unsplash.com/1600x900/?fitness)"}}'>Image Background 위 처럼 data-nkd..

* Tilted Content Slideshow 이미지를 기울어진 형태로 보여줄 수 있는 3D 입체 슬라이드쇼 입니다 * 설치방법 첨부된 압축파일을 해제하여 원하는 폴더에 업로드 합니다 적용될 페이지에 제공되는 css 및 js 를 선언합니다 애니메이션 효과가 적용될 사진과 텍스트를 아래와 같이 배치하도록 합니다 문서 하단에 제공되는 js 파일 및 스크립트를 선언합니다 위와 같은 관련 코드가 실행되었을때 화면은 아래와 같습니다 샘플소스 코드는 첨부된 파일중 index.html 파일을 참조하시면 도움이 되실겁니다

* Grid to Fullscreen 사진을 확대, 애니메이션 격자형태로 변형하여 보여줄 수 있는 기능을 가진 jquery plugin * 사용방법 첨부된 압축파일을 다운로드 하여 사용할 웹루트 디렉터리에 업로드하고 압축을 해제합니다 그후 아래와 같은 핵심코드들이 삽입되어야 합니다 적용할 html 문서에 샘플로 제공되는 css , js 파일을 선언 이미지 및 설명문구가 들어갈 html 구문을 아래와 같이 작성 하단에 기본 제공되는 js 파일 및 스크립트 선언 애니메이션 효과 관련 스크립트 옵션은 아래와 같습니다 timing - duration : 애니메이션 지속시간 조절할 수 있습니다(숫자형, 초단위) activation : 사진의 애니메이션 움직임 위치를 선정할 수 있습니다(`closestCorner`..

모든 방향으로 드래그앤드롭으로 이동하면 원하는 위치로 콘텐츠가 이동되며, 마우스 스크롤을 이용하여도 해당 콘텐츠가 아래위로 이동되어 간편하게 본문내 영역중 내가 원하는 위치를 확인할 수 있습니다. 본 소스 하단에 정의된 라는 소스를 반드시 추가해두셔야 하며, 상단에 적용된 라는 css 를 이용하여 원하시는 형태의 디자인을 구현할 수 있습니다. 실제 소스상 필요한 항목은 라는 부분이며 data-draggable-scroll-content 값을 가진 영역이 본문 콘텐츠 영역입니다. 이미지 형태로 만들어진 지도나, 확대된 이미지를 자세하게 보기 위한 용도로 이용하시는데 유용합니다.

해당 이미지를 마우스 오버한 상태에서 커서의 위치에 따라 배경이미지가 움직이는 효과를 가진 배경이미지 디자인 소스입니다. 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로 부터 읽어와서 구성하시면 좋을듯 하구요. 프로그램 작업 불가능하신분들은 강제코딩 형태로 사용하셔야 할듯 합니다. 기능은 무료로 제공되는 자료치고는 쓸만하지만..

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

- 라이센스 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 메소드, 이벤트 등은 홈페이지를 참고하세요. - 작동 예제