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

iTyped.js는 타이핑되는 것처럼 텍스트를 출력해주는 JavaScript 라이브러리 입니다.사람이 직접 글자를 입력하는 듯한 효과를 이용해서 랜딩페이지 히어로 섹션, 배너 문구에 자주 사용되는 기능 입니다.https://ityped.surge.sh/ 페이지에서 타이핑 효과를 직접 확인이 가능 합니다.https://github.com/luisvinicius167/ityped?tab=readme-ov-file 페이지에서 소스 다운로드를 할 수 있으며,인스톨 방법도 확인이 가능 합니다.

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단계 상호작용 모델 : 선택과 배치를 분리합니다.시각적 피드백 : 아이템 선택 모드 동안 가..