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

# 설명Propeller.js 는 마우스를 이용하여 요소를 회전시키는 JavaScript 라이브러리 입니다. 관성 회전과 단계적 회전을 지원하며, 터치 기기와도 호환 됩니다. # 라이센스MIT License# 사용방법 압축파일에 보시면 index.html 파일을 이용하면 바로 작동되는 걸 확인할 수 있습니다. # 옵션 설정 - angle: 초기 회전 각도를 설정합니다.- inertia: 가장 중요한 옵션으로, 0과 1 사이의 숫자로 설정합니다. 0은 마우스를 뗐을 때 회전이 즉시 멈추는 것을 의미하며, 1은 무한히 회전함을 의미합니다. (이 데모에서는 0.99를 사용합니다.)- speed: 초기 회전 속도입니다. 실행 중(Runtime)에 속도 값을 변경하는 용도로도 사용할 수 있습니다.- minima..

Coze 코딩 없이 다양한 AI 모델로 스마트한 AI 챗봇을 제작 관리하는 플랫폼입니다즉 내가 가진 PDF나 텍스트 파일(지식 베이스)을 업로드하면, 우리 회사나 서비스에 특화된 전문 상담 챗봇을 만들 수 있습니다.코즈(Coze)의 주요 포인트* 노코드(No-code): 프로그래밍 지식이 없어도 드래그 앤 드롭으로 챗봇 제작 가능* 강력한 모델: GPT-4, Claude 3.5 등 최신 LLM을 무료 또는 저렴하게 활용* 멀티 배포: 만든 봇을 디스코드, 텔레그램, 슬랙 등에 클릭 한 번으로 연결* 확장성: 60개 이상의 플러그인과 워크플로우로 뉴스 검색, 이미지 생성 등 수행 구독료는 기본 무료인데 하루 10크레딧을 제공합니다.AI 모델 호출에 따라 크레딧이 소비되는데.유료 모델은 비싸서 유료 구독을..

Gauth 인공지능을 기반으로 학생들의 숙제는 돕는 온라인 도구입니다.Gauth AI의 핵심 기능- 스캔 및 문제 해결: 수학, 과학, 물리 등 복잡한 수식이 포함된 문제를 사진으로 찍으면 AI가 텍스트와 기호를 인식하여 즉시 해답을 제시합니다.- 단계별 설명 (Step-by-Step): 단순히 정답만 알려주는 것이 아니라, 어떤 원리로 해당 결론에 도달했는지 논리적인 과정을 단계별로 설명해 줍니다.- 다양한 과목 지원: 초기에는 수학 중심이었으나 현재는 화학, 생물, 사회, 영어 등 광범위한 교과목에 대한 질의응답이 가능합니다. 구독료는기본 무료로 쓸 수 있으며, 유료 구독시 1개월 약 1.5만원이며, 분기 단위, 연간 단위로 결제하면더욱 저렴하고 많은 혜택을 이용할 수 있습니다.유료 구독시 주요혜택에..

스크롤 위치에 따라 body 배경색이 패널 색상으로 자연스럽게 바뀌는 효과입니다.패널 위치 감지 + body 클래스 교체 + CSS transition입니다.구조가 단순하고 색상 추가가 쉽습니다.패널 높이가 달라도 정상적으로 동작합니다.HTMLCSSJS

화면에 **커서 전용 DOM(.cursor)**을 띄워두고, 마우스 위치를 CSS 변수 --mx, --my로 전달해 커서가 따라오도록 구성한 예제입니다.링크/버튼에 마우스를 올리면 body:has(...) 선택자로 상태를 감지해 커서 크기·표시 텍스트(예: “View”)·아이콘 표시가 자동 전환됩니다.사용 방법은 간단합니다. 페이지에 .cursor 마크업을 포함하고, 커서 상태를 바꾸고 싶은 요소에 cursor-read, cursor-icon 같은 클래스를 붙이면 됩니다.또한 JS는 mousemove 이벤트로 좌표를 받고, 약간의 지연(부드러운 추적)을 적용해 --mx/--my를 갱신합니다.참고로 :has()는 브라우저 지원 범위가 있으니(구형 환경) 운영 적용 전 호환성 체크를 권장합니다.HTML 구조..

원하는 위치를 클릭하면 색상이 채워집니다.색상이 채워질때 서서히 채워지고 별의 크기의 변경되는 애니메이션 효과가 있습니다.htm 소스css 소스radio의 :checked 상태를 SCSS 반복문으로 해석해 형제 SVG 별들을 단계적으로 색칠하는 CSS 전용 별점 소스입니다.해당 사이트 또는 첨부파일을 다운로드 하시면 소스를 직접 확인할 수 있습니다.

CSS Grid와 육각형 마스킹 스타일을 활용해 벌집 형태의 이미지 갤러리 레이아웃을 합니다.각 아이템은 동일한 규칙으로 정렬되며, 호버 시 이미지 강조(확대/효과)로 시각적 집중도를 높입니다.사용 방법은 간단합니다. container(아이템 박스) 안에 육각형 영역에 들어갈 이미지 경로나 주소를 넣으시면 됩니다.포트폴리오/작품 갤러리/프로젝트 썸네일 등 다양한 콘텐츠 진열 UI로 응용하기 좋습니다.반응형 구성에도 유리해, 화면 크기에 따라 자연스럽게 레이아웃을 확장할 수 있습니다. HTML 구조.container each val in ['https://images.unsplash.com/photo-1543589077-870d0ba0a43d?crop=entropy&cs=tinysrgb&fit=max&f..

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 + '..