공부하자
제이쿼리 플러그인 풀스크린 스크롤 효과 fullPage 본문
fullPage
: 사용자가 스크롤 시 화면 전체가 스크롤 되는 효과를 표현 할 수 있는 플러그인.
fullPage에서 제공하는 각종 옵션값을 수정해 다양하게 표현 할 수 있다.
fullPage scroll snapping. Create full screen pages fast and simple
Mouse wheel snap to sections. Fast and simple to use.
alvarotrigo.com
사용법
1. fullPage에서 제공하는 플러그인 파일 다운로드 및 프로젝트 파일에 js, css 연결
2. fullPage 기본 구조 및 js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/fullpage.css" rel="stylesheet" type="text/css" />
<link href="css/03_fullpage.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/fullpage.js"></script>
<script>
$(function(){
$("selector").fullpage({
// option
});
})
</script>
</head>
<body>
<div class="wrap">
<div class="section">section 1</div>
<div class="section">section 2</div>
<div class="section">section 3</div>
<div class="section">section 4</div>
</div>
</body>
</html>
3. js 에 필요한 옵션값 추가
$(function(){
$(".wrap").fullpage({
navigation:true,//네비게이션 유무
navigationPosition:"left",//네비게이션 위치
sectionsColor:["#999","#4bbfc3","#7baabe","#666"],//각 섹션 배경색, 배열의 형식
navigationTooltips:["1번", "2번", "3번", "4번"],//네비게이션 텍스트, 배열의 형식
showActiveTooltip:true//네비게이션 선택 메뉴 활성화
});
})
* 참고 페이지
alvarotrigo/fullPage.js
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple - alvarotrigo/fullPage.js
github.com
* CDN 주소(버전별)
cdnjs.com/libraries/fullPage.js
fullPage.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Create beautiful fullscreen scrolling websites - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 11% of all websites, powered by Cloudflare. We make it faster and easier to load library fi
cdnjs.com
* 주의
JS와 CSS 버전 맞춰서 사용할 것. 버전별로 조금씩 다르기때문에 깨질 수 있다.
2.9.7버전까지만 무료. 3버전부터 상용이므로 버전 잘 확인하고 사용 할 것
옵션 값 중 자주 쓸 것 같은 옵션 값 정리
| navigation | true/false | 네비게이션 유무 |
| navigationPosition | left/right | 네비게이션 위치 |
| navigationTooltips | ["HOME","ABOUT"," "] | 네비게이션 텍스트(section 갯수만큼 작성) |
| showActiveTooltip | true/false | 네비게이션 선택 메뉴 활성화 |
| menu: '#id값' | gnb메뉴의 링크 연결 | |
| anchors | ["HOME","ABOUT"," "] | gnb메뉴의 링크 연결(section 갯수만큼 작성) 앵커의 값과 a 링크의 값 동일하게 설정 ex. a href="#ABOUT" |
|
scrollingSpeed |
1000, 1300... |
풀페이지의 스크롤 속도 값. 1000 = 1초 |
| autoScrolling | true/false | fullpage에 스크롤링 기능을 넣을 것인지에 대한 여부. 기본 값은 true. 기능이 필요 없을 시에만 작성 |
| scrollHorizontally | true/false | 마우스 휠 또는 트랙패드를 사용하여 슬라이더 내에서 수평으로 슬라이딩할지 여부를 정의합니다. autoScrolling:true를 사용하는 경우에만 사용할 수 있습니다. pullPage.js 3.0.1 버전이거나 그보다 높은 버전에서 사용 가능 |
'J-Query·Plug-in' 카테고리의 다른 글
| 페이지 스크롤 다운 애니메이션 (0) | 2021.03.10 |
|---|---|
| 제이쿼리 플러그인 슬라이드 효과 3. owl.carousel.js (0) | 2021.03.10 |
| 움직이는 배경을 넣고 싶을 때 사용하는 particles.js (0) | 2021.01.25 |
| 제이쿼리 플러그인 슬라이드 효과 2. Swiper (0) | 2021.01.12 |
| 제이쿼리 플러그인 슬라이드 효과 bxslider (0) | 2021.01.11 |