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

CSS를 이용한 3D 북애니메이션입니다.소스를 변경하여 다양하게 응용 가능합니다.HTML 구조 3D cover (CSS) https://images-na.ssl-images-amazon.com/images/I/91-j2UzZW4L.jpg" alt="cover" /> https://s3-us-west-2.amazonaws.com/s.cd..

HTML과 CSS만을 사용 가능한 이미지 오버 카드 뉴스 스타일 효과입니다.소스를 변경하여 다양하게 응용 가능합니다.HTML 구조 Level 13 5,312 Points Teacher Cartoon of a Caucasian woman smiling, and wearing black glasses and a purple shirt with white collar drawn by Alvaro Montoro. ... CSS 소스@import url('https://fonts.googleapis.com/css?fami..

안녕하세요 해피CGI 입니다.해피 커뮤니티 웹솔루션 Ver3.8으로 업그레이드 되었습니다.자세한 사항은 아래의 내용을 참고하시기 바랍니다. 해피 커뮤니티 웹솔루션스킨 A (미니홈 비내장)해피 커뮤니티 웹솔루션스킨 A (미니홈 내장)해피 커뮤니티 웹솔루션스킨 B (미니홈 비내장)해피 커뮤니티 웹솔루션스킨 B (미니홈 내장)

HoverMe는 스마트 화살표 위치를 사용하여 애니메이션이 적용된 사용자 정의 툴팁을 만드는 가벼운 jQuery 플러그인입니다. 툴팁 크기나 요소 크기에 관계없이, 마우스를 올려놓은 요소의 중앙을 직접 가리키도록 화살표 배치를 자동으로 계산합니다. # 라이센스 : MIT# 사용방법 1. HEAD 에 CSS 추가 합니다. 기본적으로 hoverMe.css 만 있어도 됩니다. link rel="stylesheet" href="hoverMe.css">style>html,* { font-family: 'Inter'; }body { background-color: #fafaf8; line-height:1.6;} .lead { font-size: 1.5rem; font-weight: 300;backgrou..

mosaico-cropper는 사용자 친화적이고 터치가 가능한 인라인 이미지 자르기 도구로, 백엔드 처리를 지원하여 이미지를 자르고, 크기를 조절하고, 확대/축소하고, 이동할 수 있습니다. 이미지를 클릭하여 편집 모드를 시작한 다음 확인 아이콘을 클릭하여 변경 사항을 저장합니다. jQuery, jQuery UI , Font Awesome, jQuery UI Touch Punch 로 제작되었습니다 .# 라이센스 : MIT # 사용방법 1. 라이브러리 호출 link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />script src="https://code.jquery...

- 소개scrollPaging은 웹 페이지에 무한 스크롤 기능을 추가하는 가벼운 jQuery 플러그인입니다.AJAX를 통해 외부 데이터 소스에서 자동으로 콘텐츠를 가져와 사용자가 스크롤할 때 기존 컨테이너의 끝에 추가합니다.이를 통해 복잡한 페이지 번호 논리를 작성할 필요 없이 필요에 따라 더 많은 콘텐츠를 로드하는 연속적인 탐색 환경이 만들어집니다.- 라이센스MIT- 사용 방법1. 플러그인을 다운로드하고 jQuery 라이브러리 뒤에 메인 스크립트 'jquery-scrollpaging.min.js'를 로드합니다.2. 초기 항목을 사용하여 콘텐츠 컨테이너를 만듭니다. 플러그인은 스크롤 방향에 따라 이 컨테이너에 새 콘텐츠를 추가하거나 추가합니다.3. 스크롤 가능한 요소에 플러그인을 초기화합니다. 페이지 수..

- 소개jQuery Zoom은 마우스를 올리거나, 잡거나, 클릭하거나, 토글하면 이미지를 확대해주는 간단하고 사용하기 쉬운 jQuery 확대/축소 플러그인입니다 .- 라이센스MIT- 사용 방법1. 웹페이지에 jQuery 라이브러리와 jQuery Zoom 플러그인을 포함합니다.2. 플러그인을 호출하면 준비가 완료됩니다.3. 마크업4. CSS (데모에만 해당, 플러그인에는 필수 아님) 5. 기본 옵션을 사용할 수 있습니다.- 작동 화면

이 예제는 React로 제작된 이미지 슬라이더로, 마우스 움직임에 따라 패럴랙스 효과가 적용되어 생동감 있는 화면 전환을 제공합니다.슬라이드는 버튼 클릭이나 이미지 선택으로 이동할 수 있으며, 중앙에 위치한 슬라이드가 강조되어 자연스러운 시각적 집중을 유도합니다.마우스 오버 시 이미지와 텍스트가 미묘하게 이동하며, 사용자 입력에 반응하는 인터랙티브한 경험을 제공합니다.CSS 트랜지션과 애니메이션을 활용하여 부드럽고 매끄러운 전환 효과를 구현했습니다.HTML 구조#appCSS 소스@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700|IBM+Plex+Sans:500&display=swap'); :root { --color-pri..

안녕하세요 해피CGI 입니다. 해피 업체정보소개 웹솔루션 Ver7.0 이 출시되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더욱 강력한 기능으로 보답하겠습니다.감사합니다.

세로 스크롤에 따라 카드들이 순차적으로 고정되며 확대되는 스택 효과. GSAP ScrollTrigger를 활용한 인터랙티브 디자인 예제입니다.이 예제는 사용자가 페이지를 스크롤할 때 카드들이 하나씩 고정되면서 부드럽게 확대되는 스택(Stacking) 애니메이션 효과를 구현합니다. 각 카드가 화면 중앙에 도달하면 잠시 고정되었다가 다음 카드가 이어지는 방식으로 자연스러운 흐름을 보여주며, GSAP의 ScrollTrigger와 ScrollSmoother 플러그인을 활용하여 스크롤 위치와 애니메이션이 매끄럽게 동기화됩니다. HTML 구조 Stacking Card Title Lorem ipsum dolor, sit amet consectetur adipisicing..