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

#카드 슬라이더 #회전형 카드 목록 #카드형 이미지 롤링 #카드 회전 뷰어카드 형식의 콘텐츠를 좌우로 부드럽게 넘길 수 있도록 구성된 이 캐러셀은, 반응형 디자인과 터치/마우스 인터랙션을 지원하여 다양한 환경에서 시각적으로 깔끔한 콘텐츠 탐색을 제공합니다.HTML 구조OUR TEAM ‹ https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=3687&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Team Member 1" /> https://images.unsplash.com/photo-156860247..

마우스를 올리면 디자인이 변경되는 깔끔하고 심플한 느낌의 버튼 효과입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 Hover Swipe CSS 소스* { margin: 0; padding: 0; border-sizing: border-box;} html, body { width: 100%; height: 100%; border: none; outline: none;} body { display: flex; align-items: center; justify-content: center; background-color: #d2f7d3;} #cursor { position: fixed; z-index: 100; left: 0; top: 0; ..

마우스 효과가 들어간 네비게이션 커서 이펙트입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 Home Our Story Studio Contact CSS 소스@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,750,700,800,900&display=swap'); body { margin: 0; padding: 0; cursor: none; font-family: 'Poppins', sans-serif;} .nav-wrapper { width: 100%; height: 100vh; background..

**CSS Gooey Menu (Version 3)**는 SVG 필터와 CSS 트랜지션을 조합해 만든 인터랙티브한 원형 메뉴입니다.버튼 클릭 시 서브 메뉴들이 액체처럼 부드럽게 퍼지고 합쳐지는 **'Gooey 효과'**가 특징이며, 시각적으로 독특하면서도 부드러운 사용자 경험을 제공합니다.SVG 필터 기반이라 가볍고 해상도에 독립적이며, JavaScript 없이 순수 CSS로도 구현이 가능합니다.HTML 구조Gooey MenuUsing CSS and SVG FiltersBy https://codepen.io/lbebber">Lucas Bebberhttps://codepen.io/lbebber/pen/LELBEo" target="_blank" rel="noopener">Version 1 - https://..

Pure SVG Loader Animation은 SVG 태그만으로 구현된 로딩 애니메이션으로, CSS나 JavaScript 없이도 동작하며 가볍고 해상도에 독립적입니다.CSS로도 스타일 확장이 가능해 다양한 로딩 효과를 연출할 수 있어 웹 성능과 디자인 모두에 유리합니다.HTML 구조Pure SVG Loader attributeName="transform" attributeType="XML" type="rotate" dur="5s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> attr..

SVG 글자에 애니메이션을 추가하여 역동적인 디자인을 할 수 있습니다.HTML, CSS, JS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다. HTML C263.5,51.4,263.6,52,263.6,52.7z" /> C213.6,54.7,213.6,53.7,213.6,52.7z" /> C230.7,28.6,234.5,27.7,238.5,27.7z" /> 327,55.5 336.8,65.6 359.9,49.7 " /> ..

버튼 디자인으로 마우스 오버 시 버튼 배경이 바뀌는 애니메이션이 있습니다.HTML, CSS, JS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다. HTML Squircle Long Squircle Button OKCSSbody { height: 100svh; display: grid; place-items: center; background: #faffec;} @property --bg-rotate { syntax: ''; initial-value: 0deg; inherits: false;} JS// technique pulled from:// https://www.simeongriggs.dev/responsive-extendable-squircles-with-sv..

햄버거 버튼을 클릭하면 메뉴가 서서히 나타나는 오버레이 메뉴 기본형입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 Homepage Company Products About us Contacts CSS 소스* { font-family: 'Raleway', sans-serif; font-weight: 300;} #toggle { position: absolute; top: 30px; right: 30px; width: 30px; height: 21px; cursor: pointe..

마우스를 올리면 제목, 평점 등 다양한 정보가 나타나는 마우스 오버 효과입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 ...자세한 소스는 데모 사이트를 통해 확인해 주세요. CSS 소스body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f5f5f5;} .wrapper { position: relative; width: 100%; height: 100%; padding: 20px; display: flex; align-content: center; justify-content: center; gap: 2..

스위치 형태의 토글 버튼입니다.클릭시 자연스러운 애니메이션 효과가 있습니다.css를 조절하여 에니메이션 효과를 간단하게 수정할 수 있습니다.첨부파일을 다운로드 받거나 해당 사이트에서 전체 html,css 소스를 다운로드 받을수 있습니다.