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

- 라이센스 MIT - 사용 방법 1. 파일 상단에 ScrollTabs 플러그인 CSS 파일 링크를 걸어줍니다. 2. jQuery 라이브러리와 ScrollTabs 플러그인 JS 파일 링크를 걸어줍니다. 3. 스크롤이 가능한 탭에서 마우스 휠을 활성화 할 수 있도록 mosewheel 플러그인 JS 파일 링크를 걸어줍니다. 4. 아래와 같이 탭 메뉴를 구성합니다. 5. ScrollTabs 플러그인을 호출합니다. 6. 아래와 같은 옵션들을 설정할 수 있습니다. 7. API의 메소드는 홈페이지를 참고하세요.

.scrollTop() 을 이용하여 스크롤시 지정한 값까지 이동하면 상단으로란 버튼이 노출되고 클릭시 부드럽게 상단으로 이동하며 버튼이 사라지는 자료입니다. 버튼 .scroll {position: fixed; left: 50%;bottom: 50px;display: none;} 버튼을 하단 고정으로잡고 숨깁니다. $( window ).scroll( function() { if($(this).scrollTop() > 400 ) { $('.scroll').fadeIn(); }else{ $( '.scroll' ).fadeOut(); } } ); 지정한 값만큼 스크롤시 버튼이 보이고 아니면 사라집니다. $('.scroll').click(function(){ $('html, body').animate({ scro..

해당 이미지를 마우스 오버한 상태에서 커서의 위치에 따라 배경이미지가 움직이는 효과를 가진 배경이미지 디자인 소스입니다. event: 'mouse_move', animation_type: 'rotate', 위 두가지 소스로 인해 마우스 커서 이벤트 및 에니메이팅 효과를 적용할 수 있습니다. $('.parallax-demo-4').parallaxBackground({ event: 'mouse_move', animation_type: 'rotate', animate_duration: 1, zoom: 70, r otate_perspective: 1000 }); 본 예제에서 총 5가지 효과를 확인할 수 있습니다. 1) 스크롤 시 이미지 움직이는 효과 2) 스크롤시 이미지 rotate 에니메이팅 효과 3) 마우스..

html Brand Home page a page b page c page d css body background: #eee min-height: 3000px padding: 0 margin: 0 font-family: 'Open Sans', sans-serif .container width: 80% margin: 0 auto clear: both a display: inline-block color: #333 text-decoration: none nav background: #fff height: 80px line-height: 80px box-shadow: 1px 1px 1px rgba(0, 0,0, 0.2) position: fixed top: 0 left: 0 width: 100% z-index..

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

수직, 수평 스크롤바를 사용자가 정의 및 설정하는 제이쿼리 플로그인 소스입니다. 다양한 기능 및 동작 기능을 제공합니다. 스크롤 막대 좌우크기, 바 모양, 상하 이동 버튼 스타일, 스크롤바 이동 효과 등등 다양한 스타일 및 동작을 제공합니다. 기본 제공되는 소스는 물론 다양한 매개변수를 통해 사용자 정의 설정이 가능합니다.

드래그 영역이 뷰포트를 벗어나 이동하면 문서를 자동으로 스크롤 합니다. 아래 영역들을 설정에 따라 자동 스크롤 처리가 되게 할 수 도 있고 하지 않을 수도 있습니다. 단순 영영드래그 한것만으로 스크롤을 움직일 수 있습니다. 위 기능을 구현하기 위한 소스는 아래와 같으며 첨부파일로 소스 첨부해두었으니 참고하시면 됩니다. scroll 값이 true 일때만 자동스크롤 됩니다. crollSensitivity및 scrollSpeed 옵션을 사용하여 스크롤 될때 속도나 미세한 움직임 등을 제어할 수 있습니다.

스크롤할 때 애니메이션 효과를 줄수있는 css3로 만들어진 라이브러리입니다. 스크롤을 할 때 서서히 사라지거나 오른쪽, 왼쪽에서 나타날 수 있는 등의 효과를 줄수 있습니다. 한번에 작동으로 끝내는 것이 아니라 올리고 내릴때 자연스럽게 서로 반대되는 효과가 나타납니다. 홈페이지에 가셔서 다운받으신 후 dist 폴더에 aos.css, aos.js를 사용합니다. 스크립트에 AOS.init();을 입력합니다. 효과를 사용할 태그에 data-aos="애니메이션효과이름"을 입력합니다. 위 이미지는 사용가능한 애니메이션 목록입니다. 그 외 자세한 설명은 https://github.com/michalsnik/aos에 있습니다.

간략설명 Scrollocue는 키보드 키를 이용하여 세로로 긴 페이지의 컨텐츠들을 스크롤하여 확인하도록 해주는 jQuery 플러그인 입니다. 첨부파일내 파일구성 README.md index.html main.css normalize.css jquery-2.0.3.js scrollocue.js 지원되는 브라우저 Internet Explorer 9 이상 Crome FireFox Safari Opera 소스해석 index.html 1. 첨부파일내에 있는 CSS 파일 및 JS 파일들을 링크 걸어 줍니다. 2. 페이지내에 출력할 컨텐츠들을 , 과 같은 태그로 감싸줍니다. 3. 출력한 컨텐츠 전체를 1개의 DIV 태그로 묶어 준 뒤 ID 값을 지정합니다. 4. DIV 밖에서 아래와 같이 플러그인을 호출해 줍니다. ..

앵커를 이용하여 버튼을 클릭시 해당 위치로 이동합니다. 이동시 상하로 슬라이드되는 많이 사용하는 기본이 되는 제이쿼리입니다. 익스10버전 크롬에서 정상적으로 사용이 가능합니다. 사이트에서 소스를 다운로드 받으시거나 페이지에서 바로 소스를 확인할수 있습니다.