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

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

보더 차제에 애니메이션과 그라데이션을 적용하는 것이 아니라여백을 주어 해당 여백에 애니메이션과 그라데이션을 적용하여 보더처럼 만드는 방식입니다.--borderWidth 라는 변수를 사용하여 손쉽게 여백의 크기(보더의 굵기)를 조절할 수 있습니다.

물결 애니메이션이 적용되어 있습니다.css 파일에서 손쉽게 색상, 투명도, 속도 등을 변경하여 사용할 수 있습니다.해당 사이트에 방문하거나 첨부파일을 다운로드 받으시면 html과 css 코드를 확인할 수 있습니다.

웹 인터페이스를 위해 설계된 최첨단 UI 구성 요소 내비게이션 디자인 입니다.디자인할때 참고하면 유용할거 같습니다.자세한 내용은 데모를 참고해 주시기 바랍니다.HTML

간편 홈페이지 제작 웹솔루션법률사무소, 건축사무소, 간판업 스킨 리뉴얼 안녕하세요 해피CGI 입니다. 간편 홈페이지 법률사무소, 건축사무소, 간판업 스킨이 새롭게 리뉴얼 되었습니다. 자세한 사항은 아래의 링크를 클릭하여 상품상세화면 및 사용자화면, 관리자모드를 참조해주시기 바랍니다. 더욱 좋은 기능과 서비스로 보답하겠습니다. 감사합니다. 법률사무소 건축사무소 간판업

안녕하세요 해피CGI 입니다. 간편 홈페이지 제작 웹솔루션이 Ver3.7 으로 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다.

JavaScript를 사용하여 캔버스에 노이즈 애니메이션을 추가하는 디자인 입니다.노이즈를 추가하는 이미지가 있으면 사용하기 좋을거 같습니다.자세한 내용은 데모를 참고해 주시기 바랍니다.HTML CSSbody{ overflow: hidden; margin:0; background-color: #ccc;} #cnv{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); border: 3px solid #333; border-radius: 150px; background-color: #aab;} JSimport { Vector2 as vec2, MathUtils as mu, Clock } from "three";i..