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

Selectize는 텍스트 입력과 선택 박스를 결합한 jQuery 기반의 커스터마이즈 가능한 UI 플러그인입니다. 태그 입력, 연락처 목록, 국가 선택기 등 다양한 용도로 활용할 수 있으며, 자동완성, 키보드 내비게이션, 원격 데이터 로딩 등 풍부한 기능을 제공합니다. https://selectize.dev/ 데모 페이지는 https://selectize.dev/docs/demos URL에서 확인을 하시면 됩니다.기능별로 정리가 잘 되어 있습니다.https://selectize.dev/docs/api 페이지에서 API 메뉴얼을 확인이 가능합니다.

Selectric은 HTML 선택 요소를 빠르고 간편하게 커스터마이즈할 수 있는 가벼운 jQuery 플러그인입니다. 키보드 내비게이션을 지원하며, 옵션 박스가 항상 보이도록 유지됩니다. 또한, jQuery 외에 다른 외부 라이브러리에 의존하지 않습니다.https://selectric.js.org/ 데모는 https://selectric.js.org/demo.html 페이지에서 확인을 할 수 있습니다.상단의 테마 변경 기능으로 다양한 테마를 적용하여 확인이 가능 합니다.메인페이지 하단에 사용방법이 기재 되어 있고,데모 페이지에서 옵션 사용법을 확인이 가능 합니다.

웹에서 제작된 뽑기 게입입니다.HTML, CSS, JS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML                                                                                                                                                                                                                                                                  by masahito / http://www.ma5a.com/">ma5a.com   CSS,  JS는 데모를 통해 확인해 주세요

분할된 랜딩 페이지 입니다.마우스 오버시 해당 영역이 커지는 애니메이션 효과가 있습니다.css 에서 분활된 영역의 비율과 애니메이션 속도를 쉽게 변경할 수 있습니다.스크립트소스입니다데모사이트 또는 첨부파일을 다운로드 하시면 css 및 js 전체 소스를 확인 할 수 있습니다.

https://particles.js.org/samples/presets/confetti데모 링크를 보시면 이런 폭죽 애니메이션 사용이 가능합니다. 그러나, 폭죽 외에도 다양한 애니메이션을 지원하니 두루 확인해 보시면 됩니다.사용법도 간단합니다.위의 CDN 링크를 첨부하고위의 스크립트 만으로도 폭죽 애니메이션이 나타납니다.id 의 값은 div 에 tsparticles 를 주면 해당 div 에 애니메이션이 나타납니다.다양한 옵션이 제공하니 페이지를 읽어보시면 되겠습니다.

최소화된 크기는 2KB 미만, 압축된 크기는 800바이트 미만의 js 입니다.사용하기도 쉽습니다.위와 같이 간단한 사용법으로 사용 가능합니다.간단한 사용으로 SVG 애니메이션을 만들 수 있습니다.https://codepen.io/lcdsantos/pen/xwwEJw/데모를 보시면 이해가 빠르실 겁니다. 간단한 사용으로 SVG 애니메이션을 만들어 보시면 되겠습니다.

페이지 로드전 로드 애니메이션을 보여줄 수 있는 js 입니다. 사용법도 간단합니다.css 와 js 를 선언하고 div 를 만든 후 스크립트를 실행되게 해주면 됩니다.7가지 옵션이 있고, 배경색도 변경 가능합니다.http://joaopereirawd.github.io/fakeLoader.js/데모를 확인해 보시면 이해가 빠르실 겁니다.

- 작동 원리Zebra Tooltips는 간단하면서도 똑똑하고 시각적으로 매력적인 툴팁을 만드는 가볍고 높은 사용자 정의성을 갖춘 크로스 브라우저 jQuery 플러그인으로, 아름다운 전환 효과를 제공하고 다양한 구성 옵션을 제공합니다. 모양은 JavaScript 및/또는 CSS를 통해 쉽게 사용자 정의할 수 있습니다. 또한, 도구 설명은 부모 요소에 대해 왼쪽, 가운데 또는 오른쪽에 정렬할 수 있습니다. Zebra Tooltips는 이미지를 전혀 사용하지 않으며(모든 것은 CSS에서 처리됨) 모든 고급 기능을 지원하지 않는 브라우저에서도 문제없이 작동합니다. 또한 앵커 태그뿐만 아니라 모든 요소에 툴팁을 첨부할 수 있습니다!- 라이센스MIT- 사용 방법1. 페이지에 필요한 CSS 파일을 포함합니다.2. ..

- 플러그인 설명Flyaler는 jQuery를 위한 가볍고 간단한 알림 시스템입니다. 개발자는 눈에 띄지 않는 "growl-style" 알림 상자를 만들어 사용자에게 다양한 상태나 메시지를 알릴 수 있습니다. 이러한 알림은 성공, 오류, 위험, 경고 및 사용자 지정 유형을 포함한 다양한 유형을 지원합니다. 각 알림에는 제목, 설명 및 하단에 카운트다운 바가 포함되어 자동으로 닫힐 때까지 남은 시간을 표시합니다(기본값은 5초). 이 플러그인은 사용자 피드백, 알림 및 실시간 업데이트를 위한 깔끔한 솔루션을 제공합니다. 양식 제출 후 확인 메시지를 표시하거나, 사용자에게 오류를 알리거나, 워크플로를 방해하지 않고 간단한 상태 업데이트를 제공하는 데 유용합니다.- 라이센스MIT- 사용 방법1. 최신 jQuer..

간단하게 홈페이지에 언어 번역기를 장착하는 위젯 Conveythis 입니다.https://www.conveythis.com/ 무료버전과 유료버전으로 구분되어 있으므로,접속량이 많지 않은 사이트라면 무료버전으로 이용을 해보실 수 있겠습니다.https://www.conveythis.com/pricing/ 장착하는 방법은 간단합니다.회원가입 후에 대쉬보드에서 사이트 생성을 하게 되면 적용해야 될 소스가 나옵니다.해당 소스를 홈페이지내에 삽입을 하면 완료 됩니다.