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

모바일웹에서 숫자를 입력받기 위해서 좌/우로 슬라이드를 이용한 숫자 입력폼입니다. 다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 데모를 확인이 가능합니다. 좌,우로 스와이프를 이용해서 원하는 숫자를 선택할수 있고, 주변을 클릭하는 경우 원하는 숫자값을 직접 입력하는게 가능합니다. 사용하기 위한 방법은 위 설명을 참고해서 이용하는게 가능합니다. 숫자의 범위를 지정하거나, 어떤 단위로 증차감이 될런지를 지정하고, 사용자가 어떤 숫자를 선택했는지에 대한 콜백을 받아서 처리하는게 가능하네요.

* Typography Motion Effect - 글자와 이미지를 버튼클릭시 애니메이션 효과를 적용하여 보여줄 수 있습니다 * License - MIT LICENSE * 사용방법 첨부된 압축파일을 해제하고 폴더와 파일확인후 적용할 웹루트 디렉터리에 업로드 합니다 적용할 html 문서에 제공된 css 및 js 를 호출합니다 텍스트 및 이미지에 대한 애니메이션 효과를 버튼으로 교차하여 보여줄수 있게 class 선언 및 보여줘야될 문자와 이미지 태그를 삽입합니다 첨부된 압축파일안에 샘플 파일이 있으며 dist/index.html 파일을 참조하여 사이트에 적용하시면 좋을것으로 생각됩니다

* Magnetic Buttons - 호버 애니메이션이있는 작은 마그네틱 버튼입니다 마우스 포인터를 따라가면서 호버 애니메이션 효과를 보여줍니다 * License - MIT LICENSE * 사용방법 첨부된 압축파일을 해제하여 폴더와 파일 확인후 이용할 웹루트 디렉터리에 업로드 합니다 적용할 문서에 아래와 같이 css와 js 를 선언합니다 각 태그 영역의 class 선언 및 button 을 출력하게끔 코드를 삽입하고 원형 호버 애니메이션 효과를 넣기 위한 태그를 삽입합니다 적용시 아래와 같은 효과를 얻을 수 있으며 첨부된 파일 dist/index.html 파일에서도 샘플코들르 확인하실 수 있습니다

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 sp.stickyHeader.js 파일, sp.stickyHeader.css 파일을 링크합니다. 2. 다음과 같이 헤더 요소를 만듭니다. 3. 헤더 요소에 플러그인을 연결합니다. 4. 헤더 요소를 고정하기 위해 페이지가 얼마나 아래오 스크롤되는지 결정합니다. (기본값:300) 5. 고정된 헤더 요소에 추가 CSS 클래스를 추가합니다. 6. 모바일 장치에서 고정 헤더를 비활성화할지 여부를 결정합니다. (기본값:true) - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 WaltzerJS 파일을 링크합니다. 2. 슬라이드 시킬 내용들을 DIV 태그로 감싸서 추가합니다. 3. CSS 파일에 클래스를 추가하고 필요에 맞게 변경할 수 있습니다. 예) 4. WaltzerJS 플러그인을 호출합니다. 5. 옵션을 조절하거나 및 콜백 함수를 사용할 수 있습니다. 6. API 메소드 7. 이벤트 핸들러 - 작동 예제

포토샵의 드랍쉐도우 효과를 css box-shadow로 변환해주는 툴입니다 ~~^^ 좌측에서 포토샵속성값을 입력한뒤 입력한 값을 우측에서 추가 수정을 할 수 있습니다. 컨버트 후 css로 업데이트를 하면 아래에 코드를 확인하실 수 있습니다.

더욱 강력한 기능으로 보답하겠습니다. 감사합니다.

더욱 강력한 기능으로 보답하겠습니다. 감사합니다.

더욱 강력한 기능으로 보답하겠습니다. 감사합니다.

jQuery 를 이용하여 텍스트에 애니메이션 형태의 강조 효과를 주는 플러그인 입니다. 사용방법은 매우 심플 합니다. 1. 라이브러리 호출 합니다. 2. 컨텐츠 구성 Hello, Dolly Well, hello, Dolly Hello, Dolly marker-animation class 로 강조효과를 주고 싶은 텍스트를 감싸 주세요. 3. 플러그인 실행 $('.marker-animation').markerAnimation(); npm 버젼의 경우 여러가지 옵션을 제공하지만 현재 등록된 첨부파일은 npm 버젼과는 다른 버젼임을 참고 해주세요. ( Color, thickness, duration, delay, font_weight, repeat, stripe ) npm 버젼 사용하시길 희망하시는 경우 아래의..