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

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

linear-gradient, background-clip, text-fill-color 속성을 이용했습니다. 데모사이트나 첨부파일을 다운로드 받아서 소스를 확인 할 수 있습니다.

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

SSH 외에도 여러 터미널을 지원합니다. 전 SSH 목적으로 설치 해보았습니다.SSH 세션을 저장 할 수 있고, 비번도 저장가능해서 저장해둔 세션으로 아이디/비번 바로 입력 하여 접근 할 수도 있습니다.한글도 지원하니 한번 사용해 보시기 바랍니다.

CSS를 활용한 3D flip 박스입니다.- CSS 3D 플립 박스. div로 콘텐츠 뒤집기 ( 전환 및 3D 변형 ). 앞면. 뒷면. 앞면. 뒷면. 앞면. 뒷면. HTML 구조CSS 3D FLIP BOXFlipping content to a div (Transitions and 3D Transforms)                                                   Front Side                                                          Back Side                                                                            Front Side            ..

css 속성인 filter를 이용해서 이미지를 블러처리하는 방법입니다. HTML 구조          Live CSS Blur    Go ahead, resize me.   CSS 소스body {  background: url("https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=")    no-repeat center center fixed;  background-size: cover;} .blur {  background: url("https://images.unsplash.com/photo-1486723312829-f32b4..

클릭하면 움직이는 아이콘과 메뉴가 나타나는 서치 효과입니다.응용하여 다양한 사이트의 메뉴로 사용할 수 있습니다.HTML 구조 Click Me!  CSS 소스html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; background: #F3F7FF; } .shape { position: absolute; width: 50px; height: 50px; transform: scale(0.8); } .cir { position: absolute; border-radius: 50%; z-index: 5; } .btn-contain { width: 200px; height: 100p..

Candy.ai 는 이용자가 가상 동반자, 여자친구, 남자친구를 생성하고 상호간 채팅, 이미지 생성, 음성 상호 작용 등의 기능을 제공하는 AI  플랫폼입니다. 직접 원하는 스타일의 캐릭터를 만들거나, 기존 만들어진 캐릭터를 선택하여 상호작용을 할 수 있는 플랫폼 입니다.AI 캐릭터와 대화하기는 물론, AI 이미지 생성,  원하는 캐릭터 생성 등의 기능을 제공합니다.정식 한글지원은 되지 않으며, 기본 무료 버전으로 제공하나, 다양한 프리미엄 기능 사용에 따라 유료 요금제도 있습니다.가상 연인 및 친구 만들기, 멘토 및 코치, AI 와 함께 만드는 스토리텔링, 심리 상담 등으로 이용하면 좋을듯 하네요.

AI 검색엔진 라이너(AI Liner)는 학술논문, 이메일, 회의록 등을 빠르고 정확하게 정리해주는AI 보조도구 입니다.  검색 시 여러 AI모델 중 선택이 가능합니다. (유료일 경우)일반적으로 각종 문서내용을 정리요약하는 기능도 있으며, 대표적인 기능으로는 학술 논문을 검색하고, 논문 요약까지 가능합니다.문장내 인용 문구 확인도 가능합니다.또한 크롬 브라우저에서 확장프로그램으로도 사용이 가능하여 탐색에 도움을 주며,모바일앱을 통해서도 이용이 가능합니다.요금제는 무료로 시작하여 AI모델 및 파일업로드 등 여러가지 프리미엄 사용을 위한 유료 요금제도 있습니다.여러 분야에 여러 용도로 활용이 가능하네요.

HTML과 SCSS로 제작된 텍스트 애니메이션 입니다.텍스트 색상이 움직이는 디자인입니다.자세한 내용은 데모에서 확인 하실 수 있습니다.HTML  Spice up your type with CSS      Animated text fill    — no JavaScript required — CSSbody { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 } p { text-transform: uppercase; letter-spacing: .5em; display: inline-block; border: 4px double rgba(2..