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

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

- 소개 원 페이지 스크롤 네비게이션 jQuery 소스입니다. 랜딩 페이지 등 원 페이지 사이트나 이벤트 페이지 제작시 유용할 것 같습니다. - 라이센스 MIT - 작업 예제 1. 섹션을 나누어 웹 페이지를 생성합니다. 2. 섹션 내용이 화면을 꽉 채우게 CSS를 추가합니다. 3. 네비게이션 버튼을 추가합니다. 각 섹션별로 입력한 ID 값을 통해 링크를 걸어줍니다. 4. CSS 스타일을 추가합니다. 5. jQuery 라이브러리를 링크해 줍니다. 6. 특별한 추가 jQuery 라이브러리 없이 jQuery 기본 함수들만으로 네비게이션이 작동할 수 있도록 코딩합니다. - 결과물

스크롤을 내리면 상단 헤더영역을 고정해주고, 스크롤 영역을 기반한 고정영역이 변경되는 midnight.js 소스입니다. 위 해더 (로고) 부분에 위치된 영역이 고정영역이며, 해당 영역이 고정인 상태로 스크롤시 배경영역이 지속적으로 변경됩니다. 위와같이 배경이 변경되면, 로고영역이 경계선을 토대로 깔끔하게 변경되어 적용됩니다.

자바스크립트로 제작외었으며 디자인 변경이 가능합니다. 해당 사이트에서 소스를 다운로드 받으실수 있습니다. 사용법및 함수에 대한 설명을 확인할 수 있습니다.

스크롤할 때 애니메이션 효과를 줄수있는 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 밖에서 아래와 같이 플러그인을 호출해 줍니다. ..

a 태그의 속성의 위치를 파악하여 스크롤 효과를 줄수 있는 원페이지형 레이아웃입니다.. 간단히 a태그를 추가 그리고 박스 영역을 설정한 후 클릭만으로 이동이 가능한 레이아웃입니다. 크롬에서 테스트를 하였으며, 압축파일 하나에 모두 설정이 되어 있으니 쉽게 확인하셔서 사용하실 수 있습니다 ^^

간단한 소스 추가만으로 세로로 스크롤이 되는 기능을 사용하실 수 있습니다. 우선 http://richhollis.github.io/vticker/ 에서 다운을 받으시거나 첨부해드리 파일을 다운 받아 서버에 업로드를 합니다. 출력될 문구 1 출력될 문구 2 출력될 문구 3 HTML 파일에 상기 소스를 추가 하시면 부분에 있는 문구가 출력이 되면서 스크롤이 됩니다. 기본적으로는 한줄이 출력이 되나 옵션을 통해 스크롤시간등을 조절하실 수 있습니다. 옵션은 http://richhollis.github.io/vticker/methods/ 에서 확인이 가능하며 상기와 같은식으로 추가하셔서 사용하시면 됩니다.

간단한 페이지를 스크롤효과로 시원하고 동적인 페이지로 보일수 있습니다. 스크롤을 내릴수록 색상이 변하며, 투명이미지에 색상이 채워집니다. 몇가지 아이콘으로 이런 멋진 페이지를 제작할 수 있습니다. 파일을 다운받으신후 이미지와 css, 스크립트를 참고하셔서 작업해보시기 바랍니다.