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

anime.js는 가볍고 강력한 JavaScript 기반 애니메이션 라이브러리 입니다.Jquery 없이 구동이 되며, DOM, CSS, SVG, Canvas, JS 객체까지 모두 애니메이션이 가능 합니다.https://animejs.com/ 페이지에 접속시 스크롤을 아래로 내리면서 다양한 애니메이션들을 확인이 가능 합니다.https://animejs.com/documentation/ 페이지에서 사용방법을 확인이 가능 합니다.인스톨 방법은 Getting Started > Installation 메뉴에서 확인 하시면 됩니다.최신버전의 소스는 https://github.com/juliangarnier/anime 페이지에서 다운로드가 가능 합니다.

Three.js와 GLSL 셰이더로 구축된 양자 신경망을 Glassmorphic UI로 구현했습니다.자세한 내용은 데모를 참고해주시기 바랍니다.HTMLNeural Network Quantum Neural Network Click to send energy pulses. Drag to explore the structure. Crystal Theme Density100% aria-label="Network Density" oninput="this.style.setProperty('--val', this.value + '..

모서리가 각진 디자인을 한 카드 디자인입니다.자세한 내용은 데모를 참고해주세요HTML https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Venice_MAN_98_Statue_of_Odysseus_01.jpg/960px-Venice_MAN_98_Statue_of_Odysseus_01.jpg" /> Odysseus Odysseus Odysseus is the clever, resilient king of Ithaca, renowned for his wit and determination. The Odyssey recounts Odysseus' long struggle to return home after the Trojan War, as h..

swiper를 이용한 메인 이미지 슬라이드입니다.소스를 변경하여 다양하게 응용 가능합니다.HTML 구조 discover aquatic animals Beauty and mystery are hidden under the sea. Explore with our application to know about Aquatic Animals. download app Jellyfish Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.hre..

반응형이 지원되는 음악 미디어 플레이어입니다.소스를 변경하여 다양하게 응용 가능합니다.HTML 구조 Paused... Your browser does not support HTML5 Audio! 😢 ←→ Music by http://www.mythium.net/">..

애니메이션 모달을 만들 수 있습니다.설치 방법에 대한 안내가 잘 되어있어, 순서대로 해보시면 됩니다. https://joaopereirawd.github.io/animatedModal.js/위 URL 로 방문하시면 위의 스크린샷과 동일한 순서에 대한 안내를 자세히 확인이 가능합니다.순서 대로 작업 후엔애니메이션 효과를 주며 열리는 모달을 확인하실 수 있습니다.

위 스크린샷을 보시면 쉽게 이해가 가실 것입니다.URL 형태, 이메일 형태 체크는 위처럼만 주면 체크 됩니다.복잡한 형태로는 위처럼도 가능합니다.jpg, png, gif 만 가능하고 최소 2개 이상 파일 업로드 해야 하면 최대 이미지 크기는 512kb 를 넘지 않도록 하며,각 메세지까지 input file 에서 지정가능합니다.폼 필수 체크 및 제한을 주고 싶을때 아주 유용한 jquery 소스 입니다.

Liquid Glass CSS는 HTML 요소에 애플 스타일의 굴절되는 액체 유리 효과와 액체 왜곡 효과를 적용하는 경량 JavaScript/CSS 라이브러리입니다.# 라이센스MIT# 무엇을 할 수 있나?배경이 굴절되는 듯한 리퀴드/글래스 효과가 있는 카드, 버튼, 오버레이 등 현대적인 UI 스타일을 쉽게 구현할 수 있습니다.# Liquid Glass 디자인이란?Liquid Glass는 Glassmorphism(반투명 블러 기반 UI)에서 더 발전한 개념으로, 실시간 굴절·반사 효과와 깊이감을 주는 첨단 인터페이스 스타일입니다. Apple도 iOS 26부터 Liquid Glass 스타일을 도입했습니다. # 특징 - SVG 변위 필터 : 유기적인 "액체" 굴절 효과를 만들기 위해 feTurbulence사..

picknplace.js는 기존의 드래그 앤 드롭 방식을 두 단계 선택 및 배치 상호 작용 패턴으로 대체하는 JavaScript 라이브러리입니다. 표준 HTML5 드래그 앤 드롭 API는 모바일 기기 에서 제어하기가 매우 어렵다는 단점이 있습니다 . 항목을 이동하려다가 실수로 페이지를 스크롤하는 경우가 종종 발생합니다. Picknplace.js는 상호작용 모델을 변경하여 이 문제를 해결합니다. 사용자는 먼저 항목을 "선택"(잠금)하고, 원하는 위치로 스크롤하거나 이동한 다음 "배치"합니다. 이렇게 하면 의도적인 조작이 보장되고 UI가 실수로 이동하는 것을 방지할 수 있습니다.라이센스는 MIT 입니다. # 특징2단계 상호작용 모델 : 선택과 배치를 분리합니다.시각적 피드백 : 아이템 선택 모드 동안 가..

- 소개IO Select는 일반 select 요소를 Tailwind CSS로 스타일링된 검색 가능한 태그 입력란으로 변환하는 경량 jQuery 사용자 지정 select 플러그인입니다.- 특징- 다중 선택(태그로 표시됨)- 다크 모드- 접근성(ARIA 속성, 키보드 탐색)- 모바일 친화적 - 라이센스MIT- 사용 방법1. IO Select를 설치하고 jQuery 프로젝트에 임포트하세요.2. 또는 jQuery와 TailwindCSS가 설치된 문서에 'io-select.js' 스크립트를 직접 로드하세요. 3. 기존 선택 요소에 플러그인을 초기화합니다. 4. 가능한 모든 플러그인 옵션:placeholder: 선택 항목이 없을 때 표시되는 텍스트searchPlaceholder: 검색 입력란에 들어갈 자리 표시자..