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

마우스 호버시 다양한 효과를 한번에 확인 할 수 있습니다. SLIDE IN : 왼쪽에서 오른쪽으로 슬라이드 SLIDE UP : 아래쪽에 위로 슬라이드 SLIDE DOWN DELAY : 위에서 아래쪽으로 슬라이드 ( 아이콘은 출력시간 딜레이 효과 ) ROTATE : 꼭지점을 기준으로 회전하면서 출력 SCALE : 아이콘의 크기 변경 FLIP : 좌우 뒤집기 SKEW : 비스듬한 모양으로 변형 CORNER : 꼭지점에서 슬라이드 효과별 css 를 확인할 수 있습니다.

제품 소개, 메뉴 소개 등에 활용가능한 마우스오버 이벤트 슬라이등 패털 자바스크립트 html 소스 편집을 통해 좌우 개수 조절이 가능하며, 이벤트성 홈페이지, 제품 혹은 메뉴 소개를 위한 홈페이지에 사용하면 좋을것 같은 효과와 구성입니다. 해당 영역에 마우스 오버시, 해당 영역에 이미지 영역에 좌우로 커지고, 영역을 클릭시, 해당 영역의 설명 레이어가 전체 출력됩니다. 소스도 비교적 간단하여, 여러 부분에 활용이 가능하네요.

Dot Navigation Styles에서는 다양한 효과를 지닌 14가지의 도트네비게이션 스타일을 확인하실 수 있습니다. 사이트에서 파일을 다운 받으시면 사용된 html, css, js 소스를 확인하실 수 있습니다. 도트 네비게이션 기본 소스는 위와 같이 구성되어 있으며 네비게이션 스타일 명칭인 "dotstyle-fillup" 클래스를 각 명칭에 맞게 수정하므로 스타일을 변경할수 있습니다. dotstyle-fillup dotstyle-scaleup dotstyle-stroke dotstyle-fillin dotstyle-circlegrow dotstyle-dotstroke dotstyle-drawcircle dotstyle-smalldotstroke dotstyle-puff dotstyle-flip do..

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

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

연혁 페이지 같은 타임라인 형태의 페이지에 적용할만한 상하 슬라이더 우측 연도 클릭시 상하로 슬라이드 됩니다. 브라우저가 일정크기 이하로 작아질 경우 위와 같이 좌우 슬라이드 형태로 변경되는 반응형입니다.

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

* ResponsiveSlides 소개 - ResponsiveSlides.js 는 컨테이너 안의 요소를 사용하여 반응 형 슬라이더를 만드는 jQuery 플러그인입니다. Microsoft의 Build 2012 및 Gridset App 과 같은 사이트에서 사용되었습니다 . ResponsiveSLides.js는 IE6 이상의 모든 IE 버전을 포함하여 다양한 브라우저에서 작동합니다. 또한 IE6 및 기본적으로 지원하지 않는 다른 브라우저에 대한 CSS 최대 폭 지원을 추가합니다. * License - MIT license * 사용방법 - 첨부된 압축파일을 원하는 웹디렉터리에 업로드후 압축을 해제합니다 - js 파일을 링크합니다 - 마크업을 추가합니다 - css 를 추가합니다 - 슬라이드쇼를 연결하고 웹페이지를..

jQuery를 이용한 포토 슬라이드 구현 소스이며, 다양한 옵션 제공으로 손쉽게 사용이 가능합니다 비교적 간단한 소스 삽입만으로도 이용이 가능합니다. 하단의 작은 미리보기 이지미 기능과 메인 이미지 마우스 오버시 좌우 이동버튼도 활성화 됩니다. 화면 해상도에 따라서 자동으로 제어가 되며 반응형으로 제작되어 다양한 디바이스에 활용이 가능합니다.

* DiagonalSlideshow 소개 - 대각선으로 이미지 및 컨텐츠를 슬라이드 하여 볼 수 있는 컨텐츠입니다 * DiagonalSlideshow 사용법 - 첨부된 압축파일을 다운로드 하여 원하는 작업 경로에 업로드 한후 압축을 해재합니다 디자인 문서파일 html파일을 열고 아래와 같이 상단에는 css 파일선언과 하단에는 위에 압축을 해재하여 생긴 js 파일을 불러옵니다 결과는 아래와 같습니다 첨부된 압축파일에 js,css 및 보다 자세한 샘플소스가 있으니 참고하면 도움이 될것 같습니다