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

3가지 스크롤 영역을 스크롤만 이용하여 동시에 열람할 수 있습니다. 동시에 스크롤 하고자 하는 div 영역에 아래와 같이 class 와 name 을 동일하게 적용하여 이용가능합니다. 2가지 비교되는 이미지 영역으로 "드래그" 를 이용한 스크롤이 가능합니다. 이용방법은 위 스크롤 소스와 동일하나 class 명칭이 다릅니다. 두가지 스크롤 창이 동시에 스크롤 되나 스크롤 크기 및 스크롤 타임이 다르게 설정하여 비교합니다. 연혁이나 시간차를 두고 비교해야할 대상에게 유용합니다. 위와같이 name 값 영역의 타임라인 및 class 명칭을 다르게 주어 제어할 수 있습니다.

"메뉴1" 에 해당하는 스크롤 영역의 위치를 보시면 최상단에 배치되어있습니다. 스크롤을 계속해서 내리게되면 아래와 같이 "메뉴2" 에 해당하는 스크롤에 위치하면 메뉴2 부분이 활성화 됩니다. 해당 소스는 메뉴의 갯수 제한없이 본문영역내에 id 값을 추가로 늘리고, 메뉴의 싱크만 맞춰주시면 무한대로 늘릴 수 있습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴1 본문영역 메뉴2 본문영역 메뉴3 본문영역 메뉴4 본문영역 메뉴3 본문영역 메뉴4 본문영역

다운로드 받은 파일의 압축을 풀고 doc/index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 위 그림과 같이 화면에 달력이 표시되고, 동그라미가 쳐진 날짜를 클릭해보면 위 그림과 같이 그날의 이벤트를 간단하게 표시해주는 스크립트 입니다. index.html 파일의 소스코드를 열어서 보면 이벤트가 표시되어야 할 날짜와, 그 날의 이벤트를 텍스트로 설정해둔게 확인이 됩니다. 화면에 달력을 표시하고, 이벤트를 보여주는게 필요할 때 비교적 간단하게 사용하는게 가능할거 같네요. 출처는 https://www.jqueryscript.net/time-clock/animated-event-calendar.html 입니다.

* jQuery Gridly - Gridly는 jQuery 플러그인으로 드래그 앤 드롭과 그리드에서 크기 조절을 가능하게합니다. * 이용방법 - jquery js, gridly js, css 파일을 로드합니다 그리고 아래와 같이 드래그할 박스들을 출력할 div 태그영역들을 선언합니다 위와 같은 형태로 문서에 코드를 넣고 디자인을 마무리한후 URL을 호출하면 아래와 같은 박스영역들을 확인할 수 있으며 드래그이동, 추가, 삭제 기능도 제공하므로 디자인 작업자분께서 활용하시는데 도움이 되실것 같습니다 참고하실 샘플파일은 압축파일을 다운로드 하여 index.html 을 참고하시면 되겠습니다

* jquery.parallax.js - css3의 트랜스폼을 이용한 parallax 스크롤 형태의 원페이지 디자인페이지 입니다. 간단한 원페이지 형태의 회사소개 페이지나. 포트폴리오 용, 또는 이벤트형으로 사용하시면 좋은소스입니다. 라이센스는 MIT라이센스이며 파일안에서도 확인하실 수 있습니다. 마크업 및 사용방법은 위 데모사이트주소로 들어가시면 확인하실수 있으며 다운도 받으실 수 있습니다. * 이용방법 - 첨부된 압출파일을 압축해제하고 사용하려는 웹디렉터리에 업로드를 합니다 문서 상단에 샘플 css 파일과 jquery 파일호출 및 스크롤시 이미지가 보여줘야될 영역에 대한 높이값을 조정 하는 스크립트를 삽입합니다 그리고 스크롤 하면서 보여줘야될 문구와 이미지 설정은 아래와 같이 class 로 선언하여 ..

입력창에 수를 입력 받을때 jquery ui 의 spinner 을 이용하면 위와 같이 위아래 버튼을 이용하여 범위와 누를때마다 증가/차감 되는 범위 역시 조절이 가능합니다. 소스도 아래 스샷과 같이 단순 합니다. 수를 입력 받을때 이용해 보시기 바랍니다.

jquery-modal 은 이름 그대로 jQuery 를 이용하여 여러가지 모달을 구현해 놓았습니다. 1.일반 모달창 2.로그인 모달창 3.콘텐츠에 맞춘 모달창 4.Ajax 모달창 5.닫기 버튼이 없고 오직 브라우저를 닫기 밖에 안되는 모달창 6.다중 모달창 7.페이드 효과가 포함된 모달창 8.닫기 버튼 커스텀 버젼 모달창 기본 모달창 1개를 이용하여 여러가지 타입으로 나눠서 샘플을 잘 구성해 두었네요. 그래서 필요한 상황에 맞는 모달을 가져와서 사용하시면 좋을듯 합니다. 사용법은 생각보다 간단합니다. 첨부된 압축파일 해제 하시면 examples/index.html 파일을 보시면 샘플코드가 들어 있습니다. 기본 모달의 호출조건은 아래의 이미지를 봐 주세요 모달 버튼의 href 와 모달 레이어의 id 값을 ..

CKEditor5가 이전에는 Classic, Ballon, inline 이렇게 3가지 타입이 있었는데요. 이번 에는 Ballon Block, Document 타입의 편집기가 추가되었네요. 특히 Document 타입이 마음에 드는거 같습니다. ^^ 소스다운로드에 Ballon Block, Document 의 2가지 압축파일을 모두 첨부하고 싶었는데요. 현재 CKEditor5 에서 Ballon Block의 소스코드는 제공이 되지 않는 상태네요. 그래서 안타깝게도 Document 의 소스코드 편집기 소스만 첨부해 두었습니다. 사용하는 방법은 2가지 방식이 있습니다. 스크립트를 CDN 방식으로 사용하는 방법과... 첨부된 압축파일을 이용하여 스크립트를 서버에 업로드 하여 사용하는 방식이 있습니다. CDN 방식으로..

첨부된 파일을 다운로드 받아서 압축을 해제하고 나오는 index.html 파일을 웹브라우저에서 열어서 보면 간단하게 확인이 됩니다. 위와 같은 화면이 나오고 특정 자리를 클릭해보면 아래 그림 처럼 해당 좌석을 선택했다고 표시가 되고, 선택한 좌석의 가격 을 우측에 표시해주고, 합계 정도를 계산해서 화면에 표시해줍니다. index.html 파일을 텍스트 편집기로 열어서 보면 map 이란 항목에 'ff_ff', 'ff_ff', 'ee_ee', 'ee_ee', 'ee___', 'ee_ee', 'ee_ee', 'ee_ee', 'eeeee', 위와 같이 설정되어 있는 것을 'ff_ff', 'ff_ff', 'ee_ee', 'ee_ee', 'ee___', 'ee_ee', 'ee_ee', 'ee_ee', 'eeeee'..

JQUERY를 이용하여 왼쪽 또는 위쪽으로 자동 롤링되는 소스입니다. 전체 소스는 첨부파일 참고하시면 됩니다. 왼쪽으로 롤링되게 하려면 아래 소스를, //왼쪽으로 롤링 function rollingStart() { $banner.css("width", $bannerWidth * $length + "px"); $banner.css("height", $bannerHeight + "px"); //alert(bannerHeight); //배너의 좌측 위치를 옮겨 준다. $banner.animate({left: - $bannerWidth + "px"}, 2500, function() { //숫자는 롤링 진행되는 시간이다. //첫번째 이미지를 마지막 끝에 복사(이동이 아니라 복사)해서 추가한다. $(this).ap..