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

* Slide Out Box Menu 각 섹션별로 원하는 페이지를 슬라이드 하여 보여주는 기능을 가진 플러그인입니다 첨부된 압축파일을 다운받아 적용하고자하는 웹루트 디렉터리에 압축을 해제합니다 기본제공되는 css 파일을 문서상단에 호출합니다 아래와 같이 각 섹션페이지 별로 슬라이드해줄 컨텐츠를 삽입합니다 detail 레이어 부분 코드 body 태그 위에 제공되는 js 파일을 삽입합니다 위와 같이 적용하였을때 슬라이드 페이지 및 레이어로 정보를 노출하고 싶은 부분을 보여줄 수 있습니다 첨부된 압축파일에 제공되는 샘플파일들을 참고 및 응용하여 작업하면 도움이 될것 같습니다

마우스오버시 부드럽게 펼쳐지는 slide 메뉴로 jquery 를 이용하여 제작한 간단하지만 별도 설명없이 퓨어하게 이용할 수 있는 간단한 메뉴스크립트 소스입니다. 메뉴영역을 마우스 오버하면 부드럽게 열리는 서브메뉴 레이어가 출력되고, 영역을 벗어나면 부드럽게 닫기는 형태까지 적용된 간단한 메뉴효과입니다. 위 소스가 핵심사항으로 서브메뉴가 슬라이드 다운된 상태를 유지하고 마우스가 아웃되면 slideUp 을 진행하는 코드입니다. 소스상에 항목 안에 1차에 해당하는 메뉴 디자인을 넣으시면 되고 항목안에 2차 서브메뉴에 해당하는 디자인을 하셔서 이용하실 수 있습니다.

반응형 기반의 회전식 슬라이드 및 터치식 슬라이드 등 다양한 효과의 슬라이드 jquery 플러그인 소스입니다. 터치 앤 드래그 및 최신 브라우저에 호환성이 높은 소스입니다. 예시된 샘플 슬라이드 효과는 대략 10여종이며, 기본적인 슬라이드 형식은 아래와 같습니다. 최근 홈페이지에 자주 이용되는 마우스 휠 슬라이드 효과가 있어 해당 소스를 이용한 효과를 참고하시기 바랍니다. https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html 우선 기본베이스가 되는 슬라이드 소스를 html 에 삽입후 ​ 라는 소스를 적용하여 마우스 휠 소스가 적용되도록 합니다. 혹은 다운로드 받은 소스에서 docs > demos 폴더내에 mousewheel.html 파일을 ..

반응형 이미지 갤러리로 클릭시 모달창으로 이미지가 표시되며,제한된 그림 요소에 대해 유사한 반응 이미지 방식을 사용하는 이미지 갤러리를 만들어 줍니다. 브라우저 크기에 따라 반응형으로 이미지 갤러리가 정렬됩니다. 클릭시 이미지 썸네일이 슬라이딩으로 처리되는 형태의 모달창으로 구현됩니다. 핵심소스인 와 하단에 소스 및 설정 스크립트 부분을 설정하여 제어가 가능합니다.

jQuery 를 이용하여 제작된 슬라이드 플러그인 입니다. 3가지 스타일( coverflow | carousel | flat )을 옵션 설정으로 컨트롤 가능 합니다. 3D 효과를 적용하려면 carousel 로 적용해야 함을 참고 하세용. 라이센스 : MIT 지원 브라우저 Chrome, Safari & IOS Safari, Firefox, IE 10+, IE 8~9 (제한적 지원) 사용방법은 아래를 참고하세요. 1. CSS 와 jQuery를 호출하세요. 2. 슬라이드 컨텐츠를 구성하세요. Plain ol' HTML! ... 3. 슬라이드를 실행시키세요. var options = { start: 0, fadeIn: 400, loop: true, buttonPrev: 'Previous', buttonNext:..

isystkSlider 는 다양한 기능들을 지원하는 이미지 슬라이더 프로그램 입니다. 다운로드 받은 파일의 압축을 해제한후 나오는 dist/index.html 파일을 웹브라우저로 열어보면 데모를 확인이 가능합니다. 위 예제는 단순한 이미지 슬라이더의 예제입니다. 이미지 슬라이더 + 갤러리 형태의 예제입니다. 모바일에서 사용하면 좋을만한 예제입니다. 샘플용 HTML파일의 소스코드를 열어보면 이미지 슬라이더를 만들기 위한 HTML태그들을 어떻게 구성해야 하는지 확인이 가능합니다 슬라이더를 작동시키는 다양한 옵션들이 존재하네요.

네이버에서 만든 슬라이드 jquery 이며, 실제 네이버 서비스( 뿜, 샵윈도우, 쇼핑 검색, 스포츠 등) 에서도 사용되고 있습니다. https://codepen.io/egjs/pen/VNQPQd위의 링크에서 샘플 소스 참고 할 수 있습니다. https://d2.naver.com/helloworld/8618093 소개 글도 참고하시기 바랍니다.

간단한 소스를 이용하여 위 이미지와 같이 자연스러운 슬라이드 효과로 div를 숨기고 나타나게 할 수 있는 소스입니다. js, css, html 파일을 사용하며 css 스타일 수정을 통해 디자인을 수정하여 사용하면 좋을 듯 합니다.

첨부파일의 압축을 풀고 docs/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 모바일 기기 같이 화면은 작은데, 많은 정보를 입력받아야 하는 페이지에서 하나씩 입력하고, 아래로 내려가는 슬라이드와 같은 형식으로 웹페이지에서 어떤 입력양식에 대한 값을 받아야할 때 좋을것 같네요. OK를 눌러보면 준비해 둔 입력폼에 입력값을 입력한뒤에 OK를 누를때 마다 한단계씩 아래로 떨어지면서 다음 입력양식을 보여주고, 필요한 정보들을 입력하도록 해주는 UI입니다. 각 단계에 대한 입력양식을 채울때 마다, 하단의 프로그래스 바에 현재 진행상황을 표시해주고, 우측의 위, 아래 버튼을 이용해서 이전 입력폼 화면으로 이동하는게 가능합니다. 스마트폰을 이용해서, 여러가지 질문(설문)을 받기 위한 UI가 필..

가볍고 빠른 슬라이드 쇼 프로그램인 Skippr 입니다. http://austenpayan.github.io/skippr/ 페이지에 접속시 홈페이지에 해당 기능을 추가 하는 방법이 설명 되어 있습니다. 위 화면중 소스코드 부분을 확대해서 스크린샷을 올려 드리겠습니다. 1. 압축파일에 포함된 CSS 를 연결 압축파일의 2. Jquery 및 압축파일에 포함된 skippr.js 연결 3. 슬라이드 소스 구현 4. 슬라이드 실행 슬라이드 실행시 사용가능한 옵션은 위에서 링크 해드린 페이지 하단에서 확인이 가능 합니다.