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

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

위와 같이 예쁜 다이알로그를 사용할 수 있습니다.https://github.hubspot.com/vex/위의 사이트에 방문하면 예제와 설명이 설명 되어있습니다.위와 같이 js,css 를 선언하고 테마를 선택한 후 스크립트를 실행 하면 됩니다.하나의 예를 설명 드리면위와 같이 예제 소스를 실행하면위와 같은 confirm 창을 만들 수 있습니다.예쁜 다이알로그를 사용하고 싶다면 추천 드립니다.

data 요소로 시간을 지정해두면 얼마나 시간이 지났는지 알려주는 jquery 입니다.위와 같이 jquery js 를 선언하고 time 태그에 클래스 timeage 로 지정해주면위 처럼 해주면 해당 시간 이후 흘러간 시간이 얼마인지 알려줍니다.업데이트 후 얼마나 시간이 지났는지 등을 알려주는 곳에 사용하면 좋을 jquery 소스 입니다.

안녕하세요 해피CGI 입니다.임대형 해피 인터넷강의 웹솔루션 Ver3.6 [단독형]으로 업그레이드 되었습니다.자세한 사항은 아래의 내용을 참고하시기 바랍니다. 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장 + 콜러스 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 내장) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 내장 + 콜러스 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 C(쇼핑몰 내장) 해피 인터넷강의 솔루션 스킨 C(쇼핑몰 내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 C(쇼핑몰 내장 + 콜러..

안녕하세요 해피CGI 입니다.해피 인터넷강의 웹솔루션 Ver3.6 [단독형]으로 업그레이드 되었습니다.자세한 사항은 아래의 내용을 참고하시기 바랍니다. 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 비내장) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 비내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 비내장 + 콜러스 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장 + 콜러스 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 비내장) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 비내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 비내장 + ..

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 소스를 다운로드 받을수 있습니다.