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

js 와 css 를 다운로드 받아 위와 같이 하시면 일단 기본 작업은 끝이 납니다.이 이후로는https://loading.io/progress/에서 샘플을 보시면서 제공된 샘플 코드로 사용해 보시면 됩니다.다양한 모양을 제공하고 있습니다.특정 이미지로도 프로세서바도 만들 수 있으니, 샘플을 참고해보세요.

상금의 금액이 올라가는 카운터 애니메이션입니다.소스를 변경하여 다양하게 응용 가능합니다.HTML 구조 * CASH PRIZE * Rerun CSS 소스:root { --dark-rgb: 23 28 28; --darker-rgb: 8 13 7; --green: 9 252 8; --blue: 59 130 246; --pink: 231 60 126; ..

브랜드 명이나 사이트 URL 을 넣으면 해당 사이트의 브랜드 로고를 받을 수 있습니다. svg, png 로 받을 수 있으며해당 브랜드에 색상 정보로 알 수 있습니다.사이트에 특정 브랜드 로고가 필요할때 유용한 사이트 입니다.

Vue.js를 활용해 반응형으로 동작하며, 이미지 배열을 셔플(Shuffle)하는 갤러리이 CodePen 예제는 Vue.js를 사용하여 반응형 레이아웃과 동적인 이미지 배열 기능을 구현한 셔플 갤러리입니다.포트폴리오 갤러리, 상품 이미지 목록, 이벤트나 캠페인 사진 전시 활용하면 유용합니다.HTML 구조 v-for='item in items' :key='item.id' :data-pos='item.pos' :style='{ translate: `calc(var(--width) * 0.2 * ${item.pos})`, scale: item.scale, backgroundImage: `url(${item.url})` ..

안녕하세요 해피CGI 입니다.해피 집방 웹솔루션 Ver1.9 [입점형]으로 업그레이드 되었습니다.자세한 사항은 아래의 내용을 참고하시기 바랍니다. 해피 집방 웹솔루션(미니홈 비내장 +내 주변검색 모바일 미포함 ) 해피 집방 웹솔루션(미니홈 비내장 +내 주변검색 모바일 포함 ) 해피 집방 웹솔루션(미니홈 내장 +내 주변검색 모바일 미포함 ) 해피 집방 웹솔루션(미니홈 내장 +내 주변검색 모바일 포함 )

스크롤트리거를 활용한 가로 스크롤 갤러리Horizontal Scrolling Gallery with ScrollTrigger (GSAP 예제)GSAP ScrollTrigger를 활용해 세로 스크롤을 가로 스크롤 애니메이션으로 변환한 이미지 갤러리 데모.이 예제는 GreenSock Animation Platform(GSAP)의 ScrollTrigger 플러그인을 이용하여, 사용자의 세로 스크롤 동작을 가로 방향으로 변환해 주는 가로 스크롤 갤러리를 구현합니다.HTML 구조 Scroll down for the Gallery https://assets.codepen.io/16327/po..

- 소개Bootstrap Show Password는 방문자가 토글 아이콘/체크박스를 클릭하여 비밀번호 입력 필드 텍스트 표시 여부를 전환할 수 있는 jQuery 플러그인입니다.최신 Bootstrap 5, Bootstrap 4 및 Bootstrap 3 프레임워크를 지원합니다.- 라이센스MIT- 사용 방법1. 웹 페이지에 Bootstrap 3 또는 Bootstrap 4 프레임워크를 포함합니다.2. JQuery 자바스크립트 라이브러리 뒤에 부트스트랩 비밀번호 표시 플러그인을 포함합니다.3. 아이콘에 Font Awesome 5를 포함합니다(Bootstrap 4에 필요).4. 페이지에 비밀번호 입력 필드를 만듭니다. 기본 maxlength 속성을 사용하여 비밀번호 필드의 최대 문자 수를 지정할 수 있습니다. 5...

- 소개Textarea-with-Linenumbers는 일반 텍스트 영역 요소에 사용자 정의 가능하고 사용하기 편리한 줄 번호를 추가하는 작은 jQuery 플러그인입니다. 코딩 환경, 스크립트 편집 또는 줄별 서식이 중요한 대량의 텍스트 관리에 이상적입니다.콜백 함수의 출력 결과에 따라 각 줄 번호의 스타일을 사용자 지정할 수 있습니다. 이를 통해 텍스트 블록 내 특정 키워드, 구문 또는 문자가 포함된 줄에 주의를 끌 수 있습니다.또한, 이 플러그인은 커서 위치를 감지하고 현재 줄 번호를 강조 표시하는데, 이는 문제를 빠르게 찾아 수정하는 데 유용합니다.- 라이센스MIT- 사용 방법1. 최신 jQuery 라이브러리가 포함된 문서에 textarea-with-linenumbers 플러그인 파일을 로드합니다...

위의 설정에서 텍스트와 색상 크기 등을 간단하게 변경해서 사용할 수 있습니다.상단 미리보기로 바로 확인 할 수 있습니다.생성된 css, html소스를 복사할 수 있습니다.

해당 사이트에서 웹페이지에 맞는 CSS 로더를 맞춤 설정해서 생성된 css 소스를 복사하여 사용할 수 있습니다.CSS 로더의 색상, 크기, 속도를 맞춤 설정할 수 있습니다.다양한 로더 스타일을 선택할 수 있습니다.크기, 속도, 색상을 설정할 수 있습니다.html,css 코드를 복사하여 사용할 수 있습니다.