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

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

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

스크롤트리거를 활용한 가로 스크롤 갤러리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..

- 소개 및 특징스크롤 다중 선택 플러그인은 라이브 검색 지원을 통해 동적이고 대화형 다중 선택 드롭다운을 만드는 데 도움이 되는 가벼운 jQuery 플러그인입니다.검색 기능 : 사용자 입력에 따른 항목의 실시간 필터링유연한 선택 : 체크박스나 전체 행을 클릭하여 선택을 전환합니다.동적 업데이트 : 초기화 후 프로그래밍 방식으로 항목 목록 수정반응형 디자인 : 다양한 화면 크기와 기기에 적응합니다.사용자 정의 가능한 스타일 : 프로젝트 테마에 맞게 기본 스타일을 재정의합니다.포괄적인 API : JavaScript 메서드를 통해 선택 항목을 가져오고, 설정하고, 조작합니다.선택한 항목 미리보기 : 구성 가능한 미리보기 제한을 사용하여 선택한 항목을 표시합니다.전체 지우기 기능 : 단일 작업으로 일괄 선택 ..

스크롤을 통하여 글자가 보이는 효과입니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML In the enchanted world of frontend development, pixels and code guide your design journey. Entranced by the dance of colors, shapes unfold on the digital canvas. Every line of code is a spell, weaving functionality and aesthetics into an immersive digital tale. In the enchanted world of frontend development, pixels and code guide your ..

https://indigounited.github.io/jquery.simplemarquee/test/demo.html 위의 데모 링크에 접근하셔서 한번 보시는게 이해가 가장 빠릅니다. 글자를 위로 아래로 왼쪽으로 오른쪽으로 스크롤 되게 할 수 있습니다. 사용법은 간단합니다. 두 js 를 선언하고 위와 같이 오른쪽으로 스크롤 하고 싶다면, 오른쪽으로 옵션을 주면 됩니다. 그 외에 옵션들은 참고하세요.

스크롤시 원하는 문구에 하이라이트가 텍스트 앞에서 뒤로 자동으로 적용됩니다. 원하는 문구에 mark 태그를 삽입합니다. 관련 css 소스입니다. mark 태그에 적용이 됩니다. animation-timeline을 이용하여 시작시점을 정할수 있습니다. 해당 사이트 또는 첨부파일에서 관련소스를 다운로드 받아 소스 확인이 가능합니다.

마우스를 스크롤하면 카드가 쌓이는 애니메이션 효과입니다. HTML 소스 Card Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum! Card Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similiqu..

다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹페이지에서 스크롤을 내리다 보면 위 그림 처럼 스크롤을 따라다니는 메뉴가 상단에 붙어서 현재 보고 있는 위치가 어디인지를 표시해주게 됩니다. 사용방법은 아래와 같습니다.

웹페이지를 키보드 화살표 키를 따라 가로 세로로 이동하게 만들어 주는 js 입니다. 해당 js 를 받아 선언하고 위와 같이 초기화 해주면 사용 끝입니다. 페이지 구성은 세로로는 section 태그를 가로로는 aside 태그를 사용하여 디자인 하면 됩니다. 위와 같은 옵션도 제공합니다. 이미지 전시와 같은 페이지를 구상한다면 참 좋은 js 입니다.